• Hi there,

    I’ve been tinkering with prefetch, including this plugin, and while I was able to see this plugin output the <script type=”speculationrules”>, I don’t believe it’s actually prerendering anything.

    Some investigation led me to believe it’s related to our Content Security Policy. Are you able to provide any guidance or assistance on what needs to be present in a CSP in order to use the <script type=”speculationrules”> approach?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    Interesting. It looks like there indeed can be a conflict with CSP: https://issues.chromium.org/issues/40903589

    Please share how you’ve configured your Content-Security-Policy.

    Note also that the script[type=speculationrules] tag is getting printed with wp_print_inline_script_tag(). So you would be able to inject a nonce attribute on that script tag via the wp_inline_script_attributes filter.

    Plugin Author Weston Ruter

    (@westonruter)

    I just replicated this issue by enabling Strict CSP but not including a nonce attribute on the speculationrules script tag. So the key is to add the nonce attribute to that script tag as well.

    This plugin which enables Strict CSP automatically adds it to the speculationrules script as well: https://gist.github.com/westonruter/c8b49406391a8d86a5864fb41a523ae9

    So you can use PHP code like this:

    add_filter(
    'wp_inline_script_attributes',
    static function ( $attributes ) {
    $attributes['nonce'] = my_csp_nonce();
    return $attributes;
    }
    );

    Where my_csp_nonce() is replaced with your logic to obtain the nonce.

    Thread Starter Jason LeMahieu (MadtownLems)

    (@madtownlems)

    Please share how you’ve configured your Content-Security-Policy.

    We currently have no mention of script-src in it. I THINK that doing something like:
    script-src ‘self’ ‘unsafe-inline’; should make it work.

    Do you have a suggested method of testing whether or not this prefetching/prerendering is actually working as expected? Should I be able to watch the Network tab as I hover over links? Is there another method?

    Plugin Author Weston Ruter

    (@westonruter)

    Chrome DevTools has a panel specifically for debugging Speculation Rules: https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules

    In video form: https://developer.chrome.com/blog/devtools-tips-31

    Thread Starter Jason LeMahieu (MadtownLems)

    (@madtownlems)

    Awesome – thank you so much. I’ll take a look at this in the days to come and report back.

    Plugin Author Weston Ruter

    (@westonruter)

    Alternatively, you can add the 'inline-speculation-rules' directive value to your CSP, instead of adding a nonce. h/t @tunetheweb

    Plugin Author Weston Ruter

    (@westonruter)

    Correction from @tunetheweb. The 'inline-speculation-rules' directive value wouldn’t work. It would only work for Speculation Rules added via scripting. So yeah, it seems the nonce is the best bet.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.