made compliant with Content-Security-Policy unsafe-eval restrictions

[fazalmajid]

This is a fix for #30, which would also fix aframevr/aframe#5028.

Disabling inline scripts and unsafe-eval using Content-Security-Policy is a huge security win, stopping whole classes of attacks like XSS.

For more info on CSP, see:

• https://scotthelme.co.uk/content-security-policy-an-introduction/
• https://content-security-policy.com

The root cause for the breakage is the code:

//create lookups for private vars
function wrapper(name) {
  return (new Function([
    'return function '+name+'() {',
    '  return this._'+name,
    '}'
  ].join('\n')))()
}

which makes creating getters for private properties easy, but at the cost of doing a potentially unsafe implicit eval of a string. Allowing unsafe-eval in CSP works around that, at the expense of completely gutting XSS protections.

What kind of change does this PR introduce? (check at least one)

This PR simply unrolls the property getters to make them static, not dynamically evaluated. Tedious but safer, and there aren't that many private properties. Whether CSP compatibility is a bugfix or a feature is in the eye of the beholder, but many organizations will refuse to make exceptions to their CSP and thus would be unable to use this library or others that depend on it like A-Frame.

Does this PR introduce a breaking change? (check one)

• Yes
• No

It's simply unrolling the changes made by the wrapper.

Did you test your solution?

• I lightly tested it in one browser
• I deeply tested it in several browsers
• I wrote tests around it (unit tests, integration tests, E2E tests)

I tested it against A-Frame in Vivaldi, Firefox, Safari and the Oculus/Meta Browser on my Oculus Go. I verified using the following Node.js script based on your example:

var createLayout = require('./')
var loadFont = require('load-bmfont')

loadFont('https://cdn.aframe.io/fonts/Aileron-Semibold.fnt', function(err, font) {
  var layout = createLayout({
    font: font,
    text: 'Lorem ipsum dolor\nsit amet',
    width: 300,
    letterSpacing: 2,
    align: 'center'
  })

  //for rendering
  console.log(layout.glyphs)

  //metrics
  console.log(layout.width, layout.height)
  console.log(layout.descender, layout.ascender)
})

Problem Description

Make the library and its dependents compliant with Content-Security-Policy

Solution Description

Replace unsafe-eval instances with unrolled equivalent code.

Side Effects, Risks, Impact

• N/A

Unlikely to be risky

Aditional comments:

[bobinska-dev]

hello @jam3-devops I just wanted to ask if this PR is on your Radar? 😇

[danemacaulay]

ping

[MarkEEaton]

+1

[fazalmajid]

The project is clearly abandoned, last update was 7 years ago. Our best bet is to convince upstream projects that depend on it like aframe to vendor it or switch to a fork.

[MarkEEaton]

Yes, I ended up making your changes directly in the codebase, and they helped. TY.