Using HTML attribute within CMS source code

Question

Im using Prestashop for a website where the content pages are build using:

Prestashop > Preferences > CMS > Source-Code.

So for each CMS page i use source code which is basic HTML.

THE PROBLEM

Im trying to integrate a widget to the site CMS page, now ive tested the widget on a simple html document and it works perfectly.

This is the code for the HTML page.

<div class="work-widget" data-key="1111plzwork111"></div>

Prestashop CMS > Source-Code throws out the data-key="1111plzwork111", which obviously breaks the widget.

So After saving the Source-Code the HTML looks like this:

<div class="work-widget"></div>

Expected:

Can someone please help me figure out a fix for this i dont know what to do to make it work. So if i save the source code the HTML wil keep the data-key="1111plzwork111" attribute.

score 2 · Accepted Answer · answered Feb 28 '18 at 08:46

2

You have to disable the Use HTMLPurifier Library option in the Preferences > General menu in PrestaShop 1.6 or Shop Parameters > General in PrestaShop 1.7

answered Feb 28 '18 at 08:46

WebXY

139
4

Thanks man works!! i actually ended up using js to add the html into div, but you solved the issue! – Ylama Feb 28 '18 at 08:49

Ylama · Answer 2 · 2018-03-01T08:47:21.640

@WebXY has the fixed answer and it work perfectly. But in case someone is not happy with switching the HTMLPurifier off as it composes security risks.

Security Risk:

Know thy enemy. Hackers have a huge arsenal of XSS vectors hidden within the depths of the HTML specification. HTML Purifier is effective because it decomposes the whole document into tokens and removing non-whitelisted elements, checking the well-formedness and nesting of tags, and validating all attributes according to their RFCs.

I used JavaScript to fix the problem, so i added an div with a id to the CMS source Code.

Then on a certain URL i found the id and added innerHTML:

JS:

function dinePlan() {
"use strict";

var location = window.location.pathname;
var dinePlanId = document.getElementById("dineplan");

 if (location !== null && dinePlanId !== null) {
    if (location === "/restaurant"){
        // console.log("found you");
        dinePlanId.innerHTML = '<div class="work-widget" data-key="1111plzwork111"></div>';
       } 
    }
}

$(document).ready(function(){
  dinePlan();
}

Source-Code: (within the CMS)

<div id="dineplan"></div>

+1 I'd also use this approach. You don't want to lower security across whole shop(s) just so you can use data attribute on one element. — TheDrot, Feb 28 '18 at 18:54
@TheDrot yess man i just slept better approaching this method :) — Ylama, Mar 01 '18 at 06:27

Using HTML attribute within CMS source code

2 Answers2