如何在 CSP 中使用“default-src 'none'”时使用 Jquery AJAX 加载页面

Question

How can I load a page in a DIV using jquery with the default-src 'none' ?

I have checked my website using https://observatory.mozilla.org But I have one problem:

It says that I should have default-src to 'none' , but my site contains jQuery which loads a page inside Div, and reloads it every 5 seconds (a chat system).

The JS code is:

function loadlink(){
    let loadURL = "/contact_live_chat/chat_display.html";
    let loadCallback = function(){
      $("#messages").scrollTop($('#messages').prop("scrollHeight"));
    }
    $('#messages').load(loadURL, loadCallback);
}

$(document).ready(function(){
  $('#submit').click(function(e) {
      e.preventDefault();
      $.ajax({
        type: 'POST',
        url: '/contact_live_chat/chat_display.html?sendmessage=1',
        data: {content: $('#contentofmessage').val()},
        success: loadlink
      });
        $('#contentofmessage').val('');
  });

  loadlink(); // This will run on page load

  setInterval(function () {
            var scrollTarget = $('#messages');
            var pos = scrollTarget.scrollTop();
            scrollTarget.load('/contact_live_chat/chat_display.html', function() {
                $('#messages').scrollTop(pos);
                });
  },5000);
})

But I get this error in the browser:

Content Security Policy: The page's settings blocked the loading of a resource at https://www.example.com/contact_live_chat/chat_display.html (“default-src”).

Is there any other directive other than default-src which can help with this?

CSP is:

Header always set Content-Security-Policy "default-src 'none'; img-src data: https: 'self'; script-src 'self'; object-src 'none'; frame-ancestors 'none'; style-src 'self'; base-uri 'none'; form-action 'self'; media-src https: 'self'; frame-src 'none'; child-src 'none'"

Answer 1

How can I load a page in a DIV using jquery with the default-src 'none' ?

I have checked my website using https://observatory.mozilla.org But I have one problem:

It says that I should have default-src to 'none' , but my site contains jQuery which loads a page inside Div, and reloads it every 5 seconds (a chat system).

The JS code is:

function loadlink(){
    let loadURL = "/contact_live_chat/chat_display.html";
    let loadCallback = function(){
      $("#messages").scrollTop($('#messages').prop("scrollHeight"));
    }
    $('#messages').load(loadURL, loadCallback);
}

$(document).ready(function(){
  $('#submit').click(function(e) {
      e.preventDefault();
      $.ajax({
        type: 'POST',
        url: '/contact_live_chat/chat_display.html?sendmessage=1',
        data: {content: $('#contentofmessage').val()},
        success: loadlink
      });
        $('#contentofmessage').val('');
  });

  loadlink(); // This will run on page load

  setInterval(function () {
            var scrollTarget = $('#messages');
            var pos = scrollTarget.scrollTop();
            scrollTarget.load('/contact_live_chat/chat_display.html', function() {
                $('#messages').scrollTop(pos);
                });
  },5000);
})

But I get this error in the browser:

Content Security Policy: The page's settings blocked the loading of a resource at https://www.example.com/contact_live_chat/chat_display.html (“default-src”).

Is there any other directive other than default-src which can help with this?

CSP is:

Header always set Content-Security-Policy "default-src 'none'; img-src data: https: 'self'; script-src 'self'; object-src 'none'; frame-ancestors 'none'; style-src 'self'; base-uri 'none'; form-action 'self'; media-src https: 'self'; frame-src 'none'; child-src 'none'"