Content Security Policy CSP Code einfügen

Guten Tag!

Laut DSGVo Test fehlt meiner Seite Catfun-Foto.de das CSP. Ich habe den Code bei einem Anbieter gefunden und entsprechend der Empfehlung am Anfang der htacces eingefügt.

Fehlermeldung war zwar weg, aber dafür funktionieren die beiden Bilderslider nicht mehr und das Menü ist durcheinander.

Wie macht man das richtig? Und: was hat die externe Verknüpfung nach stackoverflow.com im Code der Slider zu suchen? Version ist 16.5.0

Freue mich auf Rückmeldung

Schnelltest über diesen Anbieter

rk-mediawork.de/dsgvo-website-check#Arkexterne

Externe Einbindungen

• URL: https://catfun-foto.de/ Externe Einbindungen
  -> gefundene Einbindung (http): http://stackoverflow.com
  Code anzeigen
  <script> $z(document).ready(function() { var useCssAnimation = false; var autoplay = true; if ( $z("body").hasClass("zpreducemotion") ...
  
• URL: https://catfun-foto.de/ Externe Einbindungen
  -> gefundene Einbindung (http): http://stackoverflow.com
  Code anzeigen
  <script> $z(document).ready(function() { var useCssAnimation = false; var autoplay = 1; if ( $z("body").hasClass("zpreducemotion") ...

Aufruf über : regina-stoiber.com/2019/11/01/dsgvo-konforme-webseite-selber-pruefen-checkliste-website-check-anaylse/

webbkoll.dataskydd.net/de/results?url=http%3A%2F%2Fcatfun-foto.de

Ergebnisse für catfun-foto.de

🕓 2023-01-10 08:39:01 Etc/UTC

• HTTPS als Voreinstellung: ✅ Ja
• Content Security Policy: ❌ fehlt
• Referrer Policy: ✅ Referrer werden nicht übermittelt
• Cookies: 0
• Anfragen an Drittanbieter: 0
• IP-Adresse: 85.214.224.53^Nachschlagen

Code Ansicht bereitgestellt von rk mediawork

<script>
$z(document).ready(function() {
var useCssAnimation = false;

var autoplay = 1;
if ( $z("body").hasClass("zpreducemotion") && 'slide' !== 'fade' ){ // don't allow moving animations
autoplay = false;
}

// dynamically set controls position. Needed when caption-position is "below"
function placeControls(el){
var currentSlide = el.data('flexslider').currentSlide;
var imageHeight = el.find(".zp13slider > li.zp13slider-active-slide > img").first().height();
el.find(".zp13slider-direction-nav").css("top", imageHeight/2);
el.find(".zp13slider-control-nav").css("bottom", "auto").css("top", imageHeight-29);
}

// init flexslider after 1st image has loaded, so have dimensions as quickly as possible without having to wait too long on window loaded or such and can start right with doc ready
$z('[data-article-id="2551"] ul.zp13slider li img').first().one("load", function(){
$z('[data-article-id="2551"] .zp13slider-container').flexslider({
useCSS: useCssAnimation,
touch: true,
itemMargin: 0,
animation: 'slide',
animationSpeed: 600,
namespace: 'zp13slider-',
selector: '.zp13slider > li',
controlsContainer: '[data-article-id="2551"].zp13sliderWidget .zp13slider-container',
multipleKeyboard: true,
slideshow: autoplay,
slideshowSpeed: 2000,
directionNav: true,
controlNav: true,
randomize: false,

pauseOnHover: true,
pauseOnAction: false,
smoothHeight: true,
start: function(el){
$z('[data-article-id="2551"] .zp13slider-container ul.zp13slider').addClass('zpstarted');


},

prevText: "zur&#252;ck",
nextText: "weiter"
});
}).each(function() {
if(this.complete) $z(this).trigger('load');
}); // .each() is to work around a browser bugs which don't fire load() for cached images http://stackoverflow.com/a/3877079

// make sure the slider is properly resized when the window is resized (400ms after window.resize ended)
$z('[data-article-id="2551"] .zp13slider-container').on('resize',function(event){
// prevents slider.resize() from causing a windows.resize event again which looped
event.stopPropagation();
});
var sliderTimeout2551 = null;
$z(window).resize(function(event) {
clearTimeout(sliderTimeout2551);
sliderTimeout2551 = setTimeout(function() {
var slider = $z('[data-article-id="2551"] .zp13slider-container').data('flexslider'); debug.log("Resizing Slider: ", slider);
if ( slider ){ // if slider contains only one image, slider will be undefined
$z(slider).css('height', '');
slider.resize();
}
clearTimeout(sliderTimeout2551); }, 400);

});

// smooth scroll to anchors
$z('[data-article-id="2551"] ul.zp13slider > li > a.zpnolayoutlinkstyles').click(function(e){
if ( document.location.pathname == this.pathname && $z(this.hash).length ){ // if current page contains anchor
e.preventDefault();
$z('html,body').animate({
scrollTop: $z(this.hash).offset().top - parseInt($z("body").css("padding-top"))
}, 500);
window.location.hash = this.hash;
}
});
}); </script>

Ok, danke! Dann brauche ich auf diese externe URL nicht hinweisen?
Und was ist mit CSP?

Das ist mein größeres Problem. Baut ZP CSP automatisch ein? Wenn ja, wo?

Wenn nicht, an welcher Stelle kann ich den Code einbauen ohne das Layout zu verändern.

Ich habe diesen Code für die CSP gefunden. Ist das brauchbar?

<IfModule mod_headers.c>

Header set X-Frame-Options "DENY"

Header set X-XSS-Protection "1; mode=block"

Header set X-Content-Type-Options "nosniff"

Header set Strict-Transport-Security "max-age=31536000; includeSubDomains"

Header set Referrer-Policy "no-referrer"

Header set Permissions-Policy "accelerometer=()‚ autoplay=(self), camera=(), encrypted-media=(), fullscreen=(), geolocation=(self), gyroscope=(), magnetometer=(), microphone=(), midi=(), payment=(), picture-in-picture=(self), usb=(), interest-cohort=()"

Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://www.google.com; img-src 'self'; style-src 'self'; font-src 'self'; object-src 'none'; frame-src 'self'; worker-src 'self'; connect-src 'self'; report-uri /security-report.php"

</IfModule>

MfG

Zitat

Eine Content Security Policy (CSP) ist eine zusätzliche Sicherheitsebene, die dazu beiträgt, bestimmte Arten von Angriffen wie Cross-Site-Scripting (XSS) und Data-Injection zu erkennen und zu entschärfen. Diese Angriffe werden für alles von Website-Verunstaltung über Datendiebstahl bis hin zur Verbreitung von Malware genutzt.
Ein Hauptziel von CSP ist es, XSS-Angriffe zu minimieren und zu melden. XSS-Angriffe nutzen das Vertrauen des Browsers in die vom Server empfangenen Inhalte aus. Bösartige Skripte werden vom Browser des Opfers ausgeführt, weil der Browser der Quelle des Inhalts vertraut, auch wenn er nicht von dort kommt, wo er herzukommen scheint.
Die CSP ermöglicht es Serveradministratoren, Angriffsvektoren durch XSS-Angriffe zu reduzieren oder zu eliminieren, indem dem Browser bestimmte Domains als gültige Quellen u.a. für ausführbare Skripte mitgeteilt werden. Ein CSP-kompatibler Browser führt dann nur noch Skripte aus, die von diesen Whitelist-Domänen empfangen wurde und ignoriert alle anderen Skripte (einschließlich Inline-Skripte und HTML-Attribute zur Ereignisbehandlung).
— MDN: Content Security Policy (CSP), Mozilla Contributors, CC BY-SA 2.5

⚖️ DSGVO: Erwägungsgrund 83, Art. 5.1.f, Art. 25, Art. 32.2

DSGVO Art. 32.2 stellt klar, dass Maßnahmen gegen unbefugte Weitergabe oder Zugriffe auf übermittelte, gespeicherte oder anderweitig verarbeitete personenbezogene Daten zu ergreifen sind. Eine CSP ist ein relativ einfacher Weg, um sicherzustellen, dass Webbesucher nicht unerwartet mit Dritten in Kontakt kommen.

hier gefunden

https://regina-stoiber.com/2019/11/01/dsg…-check-anaylse/

Wenn ich neue Erkenntnisse habe, schreibe ich hier.

Vielen Dank erstmal.