SPFx and CSP enforcement - Testing Inline Script

[michaelmaillot]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version: Edge 144.0.3719.115
• SPFx version: 1.18.2 & above
• Node.js version 18 & above

Issue description

Regarding CSP enforcement announcement and related documentation here & here, I wanted to see the impact on existing SPFx solutions which involve inline scripts, with the query parameter "csp=enforce".

But It seems like it doesn't raise any error and the inline script still works. I tried with a site on which the following code is called through a SPFx solution:

const parentStyles = window.document.querySelectorAll('head>style');
const iframe: HTMLIFrameElement = window.document.querySelector('iframe#iframe_edit_rte');

let rteDiv: HTMLElement = iframe.contentDocument.documentElement.querySelector(`div[id^="${this.props.fieldName}"][id$="rte"]`);
rteDiv.classList.add("ql-editor");

const iframeHead = iframe.contentDocument.documentElement.querySelector("head");
parentStyles.forEach((styleElement: HTMLElement) => {
    const style = document.createElement('style');
    style.textContent = styleElement.innerHTML;
    iframeHead.appendChild(style);
});

iframe.contentDocument.documentElement.querySelector(`#${this.props.fieldName}`).parentElement.hidden = true;

Is there a way to test behavior of SPFx solution that contains inline script without enabling CSP enforcement on the tenant?

[Ashlesha-MSFT]

Hello @michaelmaillot,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

CSP enforcement in SharePoint Online focuses primarily on script-src, which blocks inline JavaScript to prevent XSS risks. Inline styles do not execute code, so the style-src directive is intentionally permissive — seeing your code work is expected behavior, not a gap.

To verify actual CSP enforcement, you can try injecting a <script> element while using ?csp=enforce; this should trigger a violation error in the browser console if CSP is active.

[michaelmaillot]

Hello @Ashlesha-MSFT,

Thanks for clarifying this one. Indeed, the <script> tag with JavaScript code triggers the violation error. But it won't if the same tag doesn't include anything more than a JS file as a (trusted) script source.