Search code examples
javascriptcontent-security-policyhyperhtml

Can one use an hyperHTML inline-style event handler without violating `script-src-attr: 'none'`

In using hyperHTML to create something like:

    this.html`
      <input
        name="mode"
        type="radio"
        onclick=${this.handleClick}
      />
    `;

...I get this error in Chrome (against the strict header policies I've enabled from helmet):

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src-attr 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

In the built source I see it comes out as onclick="function". Is there any way to get hyperHTML to avoid generating this while still using the inline syntax?

Solution

  • I realized I was dumbly not using one of the hyperHTML-Element methods, so I was just building a string.

    It appears I can use HyperHTMLElement.wire() (available in hyperHTML-Element as well as hyperHTML despite not being documented there) or just use the alias HyperHTMLElement.hyper.