CSP Issues

[theimo1221]

Hello @zVolodymyr,

Unfortunately the creation of those style blocks result in violations to csp settings in regards to inline-styles.
Do you see any possibility to introduce an option, to style all elements directly with js calls, instead of providing a style block?

Thanks and best regards

Thiemo

[theimo1221]

I'm working on this.

[VolodymyrBaydalka]

Hi,
Potentially it's possible to apply all styles via element styles, but there come issues

• custom fonts will not be supported
• numbering may not work correctly

[isocroft]

@theimo1221 I think a good compromise might be to load the docxjs script and other helper scripts like jszip inside an iframe and then use the CSP (<iframe csp="" ) attribute.

Have you tried this ?

[theimo1221]

I did and it didn't work in our application.
But I found a proper work around and added it as a setting.
You can check my fork, from which I'll open more PR's once the current ones are merged.

[VolodymyrBaydalka]

As far as I know csp restricts from appending <style> into document, but not from creating <style> element. Knowing that, there is one quick workarround but only for chrome (for know), but maybe it will give you some ideas for futher investigation:

var container = document.getElementById("doc");
// create dummy container for styles
var stylesContainer = document.createElement("div");

docx.renderAsync(file, container, stylesContainer).then(function(x){ 
    // convert rendered styles into CSSStyleSheet
    var styles = Array.from(stylesContainer.children).map(s => {
        var css = new CSSStyleSheet();
        css.replaceSync(s.innerHTML);
        return css;
    }); 

    // apply styles to document
    document.adoptedStyleSheets = styles;
    // or apply styles to each element of content container manually
});

[theimo1221]

#17 resolves the topic for me.