使用Require JS的angularJS App中的子资源完整性

时间:2015-12-18 04:27:30

标签: angularjs requirejs require subresource-integrity

我有一个带有index.html文件

的角度应用程序

在我的index.html页面中考虑我有以下SRI代码(SubResource Integrity)

<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']
 })

有人可以帮我讲述如何在路径中引用alert.js脚本时将integrity属性包含在main.js文件中。

1 个答案:

答案 0 :(得分:9)

如果我正确理解您的问题,您希望将子资源完整性用于通过require js引用的脚本。请注意,要执行此操作,您需要RequireJS版本2.1.19或更高版本(请参阅http://requirejs.org/docs/download.html)。

对于一个工作示例(引用jQuery),请参阅此plunker:http://plnkr.co/edit/kzqLjUThJRtoEruCCtMt?p=preview。希望您能够将此方法复制到您的项目中。

我的示例使用integrity / crossorigin属性:

  • 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属性