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.

Answer 1

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

Answer 2

@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>