使用 Require JS 的 angularJS 应用程序中的子资源完整性

Posted

技术标签:

【中文标题】使用 Require JS 的 angularJS 应用程序中的子资源完整性【英文标题】:Subresource Integrity in angularJS App which uses Require JS 【发布时间】:2018-05-27 04:39:38 【问题描述】:

我有一个带有以下 index.html 文件的 Angular 应用程序

考虑在我的 index.html 页面中,我有以下 SRI(子资源完整性)代码

<html>
<head>
<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self' scripts/alert.js 'unsafe-inline' 'unsafe-eval' 'sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng='">

<script src="scripts/alert.js"
        integrity="sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng="
        crossorigin="anonymous"></script>
</head>
</html>

如果我使用 require JS,那么我必须将包含“alert.js”的脚本移动到“main.js”文件,如下所示

require.config(


    // alias libraries paths
    paths: 
            'jquery': '/scripts/alert'
            ,
    // kick start application
    deps: ['../app/require.bootstrap']
 )

有人可以帮助我如何在 main.js 文件中包含完整性属性,同时在路径中引用 alert.js 脚本。

【问题讨论】:

【参考方案1】:

如果我正确理解您的问题,您希望对通过 require js 引用的脚本使用子资源完整性。请注意,为了做到这一点,您需要 RequireJS 版本 2.1.19 或更高版本(请参阅http://requirejs.org/docs/download.html)。

有关工作示例(参考 jQuery),请参阅此插件:http://plnkr.co/edit/kzqLjUThJRtoEruCCtMt?p=preview。希望您应该能够将此方法复制到您的项目中。

我的示例将完整性/跨域属性用于:

RequireJS 本身(通过index.html 文件) jQuery(通过配置文件main.js 和你感兴趣的东西)

这是基于 RequireJS 钩子 onNodeCreated 和类似代码

onNodeCreated: function(node, config, module, path) 
    node.setAttribute('integrity', integrityForModule);
    node.setAttribute('crossorigin', 'anonymous');

请注意,此示例未将 SRI 用于配置文件 main.js 文件。为了做到这一点,要么

index.html 页面中包含内联RequireJS 配置 ...或通过额外的脚本标签(具有完整性/交叉)引用main.js(配置文件),而不是通过data-main 属性

【讨论】:

以上是关于使用 Require JS 的 angularJS 应用程序中的子资源完整性的主要内容,如果未能解决你的问题,请参考以下文章

使用requirejs来管理angularJS依赖示例

AngularJS 不使用 socket.io 刷新视图

如何将 mongodb 数据从服务器(node.js)检索到我的 AngularJS 路由

angularjs 路由 异步加载js

如何在 AngularJS 的索引页面上使用来自 Node.js 的信息

AngularJS jsonp调用404状态