AngularJS $http to retrieve external javascript file

Question

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?

Aside from the obvious XSS issues, why do you want to do this? — Dan
– Dan, Commented Jul 16, 2015 at 13:14
To embed a 3rd party form solution within my Angular based SPA. — Jty.tan
– Jty.tan, Commented Jul 16, 2015 at 13:16
That's what I did in my first attempt. I've just edited my post to include what I tried the first time, where I've got a directive that just has a templateUrl that gets that html page that has that tag in it, but I don't see the script being requested in the network tab, so it's definitely not working the way I'd normally expect it to. — Jty.tan
– Jty.tan, Commented Jul 16, 2015 at 13:22
is your url actually <form.company.com>? sorry, I know it's a silly question — Dan
– Dan, Commented Jul 16, 2015 at 13:27

Estus Flask · Accepted Answer · 2015-07-18 13:10:18Z

2

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.

edited Jul 18, 2015 at 13:10

answered Jul 16, 2015 at 17:44

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jty.tan Over a year ago

This worked, thank you very much! Then I ran into problems with the browser not allowing async-downloaded scripts to write to the document... At which point I gave up and went looking for a way to embed this in an iframe. :) Regardless, thank you! I've learnt something new :)

Collectives™ on Stack Overflow

AngularJS $http to retrieve external javascript file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related