1

Similar to this I want inject the js files that are external to the html.

Background to my issue -- I am using cobertura for code coverage generation for my Angular6 application. In my vsts build I am publishing the code coverage results, but when stepping through the file links when .js files need to be fired I get errors in the browser: 

Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

I figured the best solution would be to execute a script to inject the javascript code directly into the html rather than linking to it externally.

so for example say the html is like this:

<html>

   <script src="code.js"></script>
...
</html>

then after running a script like injector.js like so: node ./injector.js

the html will become:

<html>

   <script>
      function hello() {
         console.log('hello');
      }
   </script>
</html>

How can you do this?

or is there a better solution to this problem?

gkizior
  • 26
  • 7
  • Please check this similar thread for troubleshooting : https://stackoverflow.com/questions/34315723/blocked-script-execution-in-url-because-the-documents-frame-is-sandboxed-and – Andy Li-MSFT Jul 27 '18 at 02:41
  • And this thread for your reference: https://stackoverflow.com/questions/24453898/why-am-i-getting-a-blocked-script-execution-error/24506178?stw=2#24506178 – Andy Li-MSFT Jul 27 '18 at 05:44

1 Answers1

0

Since your development is entirely based on NodeJs.

You can simply write a nodejs script

  1. Use Glob module to fetch all HTML files using pattern from the coverage folder
  2. loop through each generated report HTML and inline the CSS and scripts.
  3. save it
  4. Then publish your code coverage report as artifacts.

Following NPM module does exactly does the inlining job with few optimizations https://www.npmjs.com/package/vsts-coverage-styles

Disclaimer: I wrote the above mentioned simple reusable npm package.

David Chelliah
  • 1,319
  • 1
  • 13
  • 24