如何在Codeigner4应用程序中使用内容安全策略(CSP)



我正在开发一个codeigner4 web应用程序。我使用apache作为我的网络服务器。当我在app/Config/app.php中使用启用CSP时public $CSPEnabled = true;,我的网页中的图像被阻止。如何通过自定义CSP行为来取消阻止来自同一来源的图像并禁用其他图像?。

我的代码的头标签是:

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png" />
<link rel="icon" type="image/png" href="../assets/img/favicon.png" />
<title><?=$title?></title>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>

<!-- Nucleo Icons -->
<link href="../assets/css/nucleo-icons.css" rel="stylesheet" />
<link href="../assets/css/nucleo-svg.css" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Main Styling -->
<link href="../assets/css/soft-ui-dashboard-tailwind.css?v=1.0.4" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<style>
.errors {font-size:small;color:red;}
.error {font-size:small;color:red;}
.alert {font-size:small;color:red;}
</style>

</head>

页面中包含启用csp后被阻止的图像的部分是:

<div class="w-full max-w-full px-3 lg:flex-0 shrink-0 md:w-6/12">
<div class="absolute top-0 hidden w-3/5 h-full -mr-32 overflow-hidden -skew-x-10 -right-40 rounded-bl-xl md:block">
<div class="absolute inset-x-0 top-0 z-0 h-full -ml-16 bg-cover skew-x-10" style="background-image: url('../assets/img/curved-images/curved6.jpg')"></div>
</div>
</div>
</div>

我的ContentSecurityPolicy.php文件具有以下设置:

public $reportOnly = true;

public $styleSrc = ['self','https://fonts.googleapis.com/css','https://cdn.tailwindcss.com'];


public $imageSrc = ['self', 'https://cdn.tailwindcss.com'];

启用CSP后,某些样式也不起作用。

您必须将加载图像的域列入白名单,网址为appConfigContentSecurityPolicy.php

要修改的行是public $imageSrc = 'self';

self-您可以从与您的网站相同的域加载图像。

示例:

public $imageSrc = ['self', 'data: w3.org/svg/2000', 'https://www.google.com'];

有了这个,你可以从同一个域、google.com和通常在Twitter引导程序中使用的内联SVG图像加载图像。

最新更新