AngularJS $http 来检索外部 javascript 文件 [英] AngularJS $http to retrieve external javascript file

问题描述

我有一个 3rd 方表单解决方案，我可以通过导入 javascript 文件将其嵌入到我的网站中.嵌入脚本的指令实际上是沿着复制并粘贴此内容:"

<script type="text/javascript" src="https://<form.company.com>/<form_name>.js"></script>

看看实际的javascript文件，它基本上只是一组

document.write(" <input id=\"SubmitButton2070990\""+"\n");document.write(" class=\"fsSubmitButton\""+"\n");document.write(" style=\"display: block;\""+"\n");document.write(" type=\"submit\""+"\n");document.write(" value=\"提交表单\"/>"+"\n");

现在，我已经尝试了几件事......我有一个带有模板 URL 的指令，该指令命中一个包含该脚本的简单部分.它看起来像这样:

指令:

angular.directive('feedbackForm',function() {返回 {限制:'A'，templateUrl: '/static/form.html'};)

form.html

<h2>测试表格</h2><script type="text/javascript" src="https://<form.company.com>/<form_name>.js"></script></div>

所发生的只是 html 被呈现，但脚本的内容不是...

我尝试了一个 $http 请求，该请求从上述第 3 方的链接中获取脚本的内容，并尝试执行它.类似的东西

$http.get('https:///.js').then(功能(响应){var formScript = new Function(response.data);表单脚本()；})

但是，我的浏览器中的网络选项卡显示，虽然请求是使用 200 响应代码发送的，但响应没有内容，为 0 字节等.

基本上，我无法弄清楚我做错了什么......

我真的可以这样做吗?我遇到了一些跨域脚本类型的事情吗?

解决方案

这是在模板中处理脚本的方式.

app.directive('directive', function () {返回 {模板:'<script src="404.js"><\/script>'+'<script>console.log("内联脚本");<\/script>',链接:函数(元素，属性){var scripts = element.find('script');angular.forEach(脚本，函数(脚本){脚本 = angular.element(script);var type = script.attr('type');var src = script.attr('src');if (输入 && !type.match(/^(?:text|application)\/javascript$/i))返回;var scriptFixed = angular.element('<script>');如果(源代码){scriptFixed.attr('src', src);} 别的 {scriptFixed.text(script.text());}script.replaceWith(scriptFixed);});}};});

当使用 $http 请求脚本时，您显然会遇到 XSS 问题.

I've got a 3rd party form solution that I can embed in my site by importing a javascript file. The instructions for embedding the script is actually along the lines of "Copy and paste this:"

<script type="text/javascript" src="https://<form.company.com>/<form_name>.js"></script>

Taking a look in the actual javascript file, it's basically just a set of

document.write("            <input id=\"SubmitButton2070990\""+"\n");
document.write("            class=\"fsSubmitButton\""+"\n");
document.write("            style=\"display: block;\""+"\n");
document.write("            type=\"submit\""+"\n");
document.write("            value=\"Submit Form\" />"+"\n");

Now, I've tried a couple of things... I've got a directive with a template URL that hits a simple partial that has that script within. It looks like this:

directive:

angular.directive('feedbackForm',function() {
return {
            restrict: 'A',
            templateUrl: '/static/form.html'
        };
)

form.html

<div>
<h2>testing form</h2>

<script type="text/javascript" src="https://<form.company.com>/<form_name>.js"></script></div>
</div>

All that happens is that the html is rendered, but the contents of the script aren't...

I've tried a $http request that gets the contents of the script from that 3rd party's link as above, and tries to execute it. Something like

$http.get('https://<form.company.com>/<form_name>.js')
    .then(function(response){
        var formScript = new Function(response.data);
        formScript();
    })

But, the network tab in my browser shows that while the request is sent with a 200 response code, the response has no contents, is 0 bytes, etc etc.

Basically, I can't figure out what I'm doing wrong...

Is it actually possible for me to do this? Is there some cross domain scripting type thing that I'm running up against?

解决方案

This is how scripts should be treated in templates.

app.directive('directive', function () {
    return {
        template: '<script src="404.js"><\/script>' +
          '<script>console.log("inline script");<\/script>',
        link: function (element, attrs) {
            var scripts = element.find('script');
            angular.forEach(scripts, function (script) {
                script = angular.element(script);
                var type = script.attr('type');
                var src = script.attr('src');

                if (type && !type.match(/^(?:text|application)\/javascript$/i))
                    return;

                var scriptFixed = angular.element('<script>');
                if (src) {
                    scriptFixed.attr('src', src);
                } else {
                    scriptFixed.text(script.text());
                }
                script.replaceWith(scriptFixed);                    
            });
        }
    };
});

You will obviously have XSS issues when requesting the scripts with $http.

这篇关于AngularJS $http 来检索外部 javascript 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！