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?

Answer 1

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.