前端如何拒绝加载不安全的脚本资源

jnsytgsyqjgm
630 阅读5分钟

在 Web 开发中，安全性是至关重要的一环。特别是当涉及到脚本资源时，恶意脚本的加载可能导致跨站脚本攻击（XSS）等安全漏洞。为了确保前端应用程序的安全性，开发者必须采取措施拒绝加载不安全的脚本资源。下面介绍几种常见的前端安全策略，包括内容安全策略（CSP）、防止内联脚本、使用 Subresource Integrity（SRI）、以及通过动态脚本加载控制来加强安全。

1. 使用内容安全策略（CSP）拒绝不安全的脚本

内容安全策略（CSP）是现代 Web 安全的一项重要技术，它允许开发者为网页设置资源加载规则，从而有效地防止恶意脚本的执行。通过 CSP，开发者可以指定哪些脚本是允许执行的，哪些是不允许的，从而保护网站免受 XSS 攻击。

设置 CSP 策略

CSP 的基本思路是通过设置 Content-Security-Policy HTTP 头来指定哪些脚本可以被加载。最常用的做法是只允许加载来自同源的脚本，拒绝加载外部不信任的脚本。例如，下面的 CSP 策略仅允许加载来自当前网站的脚本：

Content-Security-Policy: script-src 'self'

这个策略表示，只有当前网站的脚本可以加载执行，而所有外部资源（即来自不同域的脚本）都将被拒绝。

拒绝内联脚本

内联脚本（如直接嵌入在 HTML 文件中的 <script> 标签中的代码）容易被恶意脚本利用进行攻击。因此，推荐的做法是通过 CSP 禁止内联脚本的执行，确保所有 JavaScript 都来自外部资源。

Content-Security-Policy: script-src 'self'; object-src 'none';

在这个策略中，object-src 'none' 禁止加载插件对象，而 script-src 'self' 则明确规定只能加载当前网站的外部脚本文件。

允许特定可信来源的脚本

假设你的网站使用了一些来自外部可信来源的脚本（例如 Google Analytics 或 jQuery），你可以通过 CSP 指定这些外部源是允许的，而其他来源的脚本会被拒绝。例如：

Content-Security-Policy: script-src 'self' https://code.jquery.com https://www.google-analytics.com;

这个策略允许从 https://code.jquery.com 和 https://www.google-analytics.com 加载脚本，而拒绝所有其他不受信任的脚本资源。

使用 nonce 加强内联脚本控制

为了更细粒度地控制哪些内联脚本可以执行，CSP 提供了 nonce 功能，允许开发者指定某些内联脚本可以执行，而其他脚本则会被禁止执行。每次请求时，服务器生成一个唯一的 nonce 值，并将其应用于内联脚本和 CSP 策略中。

<script nonce="abc123">
  // 安全的内联脚本
  console.log('Hello World!');
</script>

对应的 CSP 策略为：

Content-Security-Policy: script-src 'self' 'nonce-abc123';

只有带有 nonce="abc123" 的内联脚本会被允许执行，其他未包含 nonce 的内联脚本将会被拒绝加载。

配置 CSP 报告机制

CSP 还支持报告机制，当浏览器检测到某些脚本违反了 CSP 策略时，会将违规信息发送到指定的报告 URI。这样，开发者可以及时了解哪些脚本资源被拒绝加载。

Content-Security-Policy: script-src 'self'; report-uri /csp-violation-report-endpoint;

当违反策略的脚本被阻止时，浏览器会将信息发送到 /csp-violation-report-endpoint，开发者可以利用这些报告检测和修复潜在的安全问题。

2. 防止内联脚本和事件处理程序

内联脚本和事件处理程序（例如 <button onclick="doSomething()">）是跨站脚本攻击（XSS）最常用的攻击目标。为了避免这些安全风险，最好避免在 HTML 中使用内联 JavaScript，而是将所有的 JavaScript 代码放到外部脚本文件中，并通过外部链接进行引用。

不安全的内联事件处理程序：

<button onclick="alert('hacked')">Click Me</button>

安全的外部脚本处理：

<button id="clickButton">Click Me</button>
<script src="scripts.js"></script>

外部脚本（scripts.js）：

document.getElementById('clickButton').addEventListener('click', function() {
  alert('Safe Button Click');
});

通过这种方式，你可以确保没有恶意的 JavaScript 注入。

3. 使用 Subresource Integrity (SRI)

Subresource Integrity (SRI) 是一种 Web 安全特性，可以确保从外部 CDN 加载的脚本没有被篡改。SRI 通过在 <script> 标签中添加 integrity 属性来指定资源的哈希值，浏览器会验证资源的哈希值是否与指定值一致。如果不一致，浏览器将拒绝加载该资源。

SRI 示例：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha384-KyZXEJr+UuN6epJ6t+ihN1Reh9T3WiH2F6FrlqIKnZuFeg0qux8rY6Apx6eZyV5z"
        crossorigin="anonymous"></script>

在这个例子中，integrity 属性包含了 jquery-3.6.0.min.js 文件的哈希值。当浏览器下载该文件时，会计算其哈希值，并与 integrity 属性中的值进行对比。如果哈希值不匹配，浏览器会拒绝加载该脚本。

4. 限制动态脚本加载

JavaScript 动态加载脚本（例如通过 document.createElement('script') 或 appendChild）也是一个常见的安全隐患，攻击者可以通过动态加载不受信任的脚本来执行恶意代码。因此，建议限制动态脚本加载的来源，确保只允许从信任的域加载脚本。

动态加载脚本的安全示例：

function loadScript(url) {
  if (!url.startsWith('https://trusted.cdn.com/')) {
    throw new Error('Script source is not trusted');
  }

  const script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
}

// 安全加载脚本
loadScript('https://trusted.cdn.com/script.js');

// 错误示例，抛出异常
loadScript('http://untrusted.cdn.com/malicious.js');

这种方法限制了脚本加载的来源，确保只有信任的源才能加载脚本。

5. 使用 Web Workers 或 iframe 隔离不安全脚本

为了防止不安全的第三方脚本影响到主页面，可以使用 Web Workers 或 <iframe> 来隔离这些脚本，限制它们的权限。Web Workers 和 iframe 提供了一个沙箱环境，防止这些脚本直接访问和操作页面的 DOM。

使用 iframe 隔离不安全脚本示例：

<iframe src="https://untrusted.site/script-page.html" sandbox="allow-scripts"></iframe>

通过设置 sandbox 属性，可以限制 iframe 中脚本的行为。例如，allow-scripts 允许执行脚本，但不允许弹出窗口或修改父页面的内容。

6. 不使用不安全的第三方库

尽量避免使用不安全或未经验证的第三方库和框架。第三方依赖库中的安全漏洞可能被攻击者利用。因此，定期检查和更新依赖库的版本，并选择信誉良好的库来降低安全风险。

avatar
文章
阅读
粉丝