Giters

jasonday / printThis

jQuery printing plugin; print specific elements on a page

Home Page:https://jasonday.github.io/printThis/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

custom style sheets and bootstrap not workinf

justaddisu opened this issue · comments

commented

I am working on asp.net core and the print preview appears correctly but my bootstrap and custom css not working

commented

I am also working with asp net core 6 and the following script worked for me:

`

$('#botonImprmir').on("click", function () {
  $('#contenido').printThis({
    importCSS: true,
    importStyle: true,
    removeInline: false
  });
});

`

But when I added CSP, the style sheets stopped working. My CSP policies are:

`

    "Csp": {
      "Fixed": "default-src 'none';img-src 'self';base-uri 'none';form-action 'self';frame-ancestors 'none';object-src 'none';upgrade-insecure-requests;navigate-to 'none';connect-src https://cdn.jsdelivr.net;report-to csp-reportto;report-uri /cspreporturi",
      "Nonceable": [
        "style-src-elem 'report-sample'",
        "script-src-elem 'report-sample'",
        "style-src-attr 'report-sample'",
        "script-src-attr 'report-sample'",
        "style-src 'report-sample'",
        "script-src 'report-sample'"
      ]
    },

`

I am using following library to implement CSP:

https://github.com/Ponant/Galebra.Security/tree/master/src/Galebra.Security.Headers.Csp

commented

Without code, it's difficult to help.
Some common issues with bootstrap is that bootstrap using CSS classes on the <body> element.
Ensure you have the following printThis config set to true:

  copyTagClasses: true,       // copy classes from the html & body tag

Additionally, with custom CSS you need to use a fully qualified URL to the CSS file. Relative URLs won't work within the iframe.

commented

The problem is the CSP (printThis not support CSP), not Bootstrap:

content-security-policy: default-src 'none';img-src 'self';base-uri 'none';form-action 'self';frame-ancestors 'none';object-src 'none';upgrade-insecure-requests;navigate-to 'none';connect-src https://cdn.jsdelivr.net;report-to csp-reportto;report-uri /cspreporturi;style-src-elem 'report-sample' 'nonce-0QzVbqplvlMHkEyHZ2nQxw';script-src-elem 'report-sample' 'nonce-0QzVbqplvlMHkEyHZ2nQxw';style-src-attr 'report-sample' 'nonce-0QzVbqplvlMHkEyHZ2nQxw';script-src-attr 'report-sample' 'nonce-0QzVbqplvlMHkEyHZ2nQxw';style-src 'report-sample' 'nonce-0QzVbqplvlMHkEyHZ2nQxw';script-src 'report-sample' 'nonce-0QzVbqplvlMHkEyHZ2nQxw'

The first problem start in:

$head.append('<base href="' + baseURL + '">');
https://github.com/jasonday/printThis/blob/23be1f8ad7ab3b3526c43dc47775279edd65bd85/printThis.js#L167

and the CSP is base-uri 'none'

and then,
setTimeout(function() {
https://github.com/jasonday/printThis/blob/23be1f8ad7ab3b3526c43dc47775279edd65bd85/printThis.js#L132
not work.

importCSS no work
https://github.com/jasonday/printThis/blob/23be1f8ad7ab3b3526c43dc47775279edd65bd85/printThis.js#L170
because
"style-src-elem is with nonce": style-src-attr 'report-sample' 'nonce-0QzVbqplvlMHkEyHZ2nQxw'

and "importStyle" no work
https://github.com/jasonday/printThis/blob/23be1f8ad7ab3b3526c43dc47775279edd65bd85/printThis.js#L180
because
inline styles is disabled: style-src-attr 'report-sample' 'nonce-0QzVbqplvlMHkEyHZ2nQxw'

commented

First, have you set debug: true and inspected the created iframe? This is step 1 in debugging printThis issues.

Additionally, I believe there may be several issues here.

  • I believe frame-ancestors: none will prevent any framing of the page. Since printThis has to create an iframe, this CSP may be preventing the creation of that iframe, even from the same domain. frame-ancestors: self may prevent this issue.
  • Have you tried setting base-uri 'self'?

All in all, because of the way printThis works, I'm not sure it would be compatible with such a strict CSP.