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, Jul 16 '15 at 13:14
To embed a 3rd party form solution within my Angular based SPA. — Jty.tan, Jul 16 '15 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, Jul 16 '15 at 13:22
is your url *actually* ``? sorry, I know it's a silly question — Dan, Jul 16 '15 at 13:27
nah, it's a fake url, but it IS a 3rd party company separate from mine. — Jty.tan, Jul 16 '15 at 13:28
I think the point is you're having a script tag inside a template loaded by angular. This isn't possible. I just read that script tags are stripped for security reasons (see this link: https://groups.google.com/forum/#!topic/angular/9d-rhMiXDmg) — martinczerwi, Jul 16 '15 at 15:37

Estus Flask · Accepted Answer · 2015-07-18T13:10:18.853

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.

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 :) — Jty.tan, Jul 17 '15 at 13:54

AngularJS $http to retrieve external javascript file

1 Answers1

Linked