Can not display Sonarqube report in Jenkins job page using iframe

Must-share information (formatted with Markdown):

  • which versions are you using (SonarQube, Scanner, Plugin, and any relevant extension)
    Soncarqube version: 10.1.0.73491
  • how is SonarQube deployed: zip, Docker, Helm
    Sonarqube is deployed as a Docker
  • what are you trying to achieve
    I need to display the sonarqube report in jenkins job page itself.
  • what have you tried so far to achieve this
    I installed nginx and make it act as a reverse proxy. I am able to hit the nginx url from the browser and it loads the sonar qube report successfully. When I try to display the sonarqube report using <iframe> from jenkins job, it shows the below error

Below are my nginx proxy configuration:

cat /etc/nginx/nginx.conf

user nginx;
worker_processes auto;

error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;

events {
worker_connections 1024;
}

http {
include /etc/nginx/mime.types;
default_type application/octet-stream;

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

sendfile        on;
#tcp_nopush     on;

keepalive_timeout  65;

include /etc/nginx/conf.d/*.conf;

server {
    listen 80;
    server_name 11.11.75.146;  # Change this to your Jenkins server domain or IP

    location / {
        proxy_pass http://11.11.75.146:9000/;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # Add the Content-Security-Policy header
        add_header Content-Security-Policy "frame-src 'self' http://11.11.75.146:9000; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com";
    }
}

}

I am using below code in jenkins job to hit the nginx reverse proxy with inturn display the sonarqube report:

SonarQube Report Dashboard

Chrome broswer console shows the below error:

jenkins.nonprod..com/:1 The CrossOriginOpenerPolicy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerfulfeatures/#potentiallytrustworthyorigin and https://html.spec.whatwg.org/#thecrossoriginopenerpolicyheader.
(index):6583 crbug/1173575, nonJS module files deprecated.
(anonymous) @ (index):6583
8stageview.js:4557 No "datastageId" on stage.
(anonymous) @ stageview.js:4557
jenkins.nonprod..com/:1 [Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: http://jenkins.nonprod..com:8080/plugin/pipelinestageview/fonts/glyphiconshalflingsregular.woff
DevTools failed to load source map: Could not load content for chromeextension://iidnbdjijdkbmajdffnidomddglmieko/sourceMap/detecteditors.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for http://jenkins.nonprod..com:8080/adjuncts/7f50c5df/org/jenkinsci/pipeline/stageview_adjunct.map.json: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Please help in this regard at the earliest possible time.

Do not share screenshots of logs – share the text itself (bonus points for being well-formatted)!**

It looks like your browser is refusing the load the iframe because your SonarQube server isn’t being served over HTTPS (something that would also be handled at the reverse proxy layer, in this case nginx)