Support Article
Web Mashup: No message shown on disabling third party cookies
SA-36695
Summary
User is using Mashup gadget with out any gateway.
When third party cookies are disabled in browser, Mashup gadget does not load or show any sort of error message.
Fiddler shows continuous HTTP 303 redirects when third party cookies are disabled.
Multiple redirects happen with 303 status and the browser gives up after that.
This works fine when browser third party cookies are enabled. Blank screen is shown when third party cookies are disabled.
Error Messages
Not able to connect - Page cannot be displayed.
Steps to Reproduce
- Use the gadget code and embed into a sample web site page.
- Disable third party cookies on Internet Explorer.
- Test the functionality of gadget.
Root Cause
The cookies disabled message is shown on browser only when cookies are blocked completely in a browser, both first party and third party cookies.
Resolution
Perform the following local-change:
To detect if any third party cookies is enabled or not on a HTML page, the best way is to set the cookie by a site that user maintain and then communicate between the sites to indicate that it was set successfully or not.
Here between the sites refers to the server hosting Pega (ABC.com) and site hosting gadget (XYZ.com)
1. Include the below local-change in mash up gadget HTML file (XYZ.com):
<head>
<script>
var messageEventHandler = function(evnt){
var isSafari = navigator.userAgent.indexOf("AppleWebKit") != -1 && navigator.userAgent.indexOf("Chrome")==-1;
if(evnt.data == 'TPCsupported' || isSafari){
loadDesiredScripts();
}else if(evnt.data == 'TPCunsupported'){
var e = document.getElementById('PegaGadget');
e.style.display = 'none';
var e = document.getElementById('nocookies');
e.style.display = 'block';
}
};
var scriptsLoadedFunc = function(){
/*BEGIN:This code block is optional..specific to this particular implementation*/
pega.web.config.encrypt = false;
/*END:This code block is optional..specific to this particular implementation*/
var evt = document.createEvent('Event');
evt.initEvent('load', true, false);
window.dispatchEvent(evt);
}
var loadDesiredScripts = function(){
var scriptEle1 = document.createElement("script");
document.head.appendChild(scriptEle1);
scriptEle1.src="http://ABC.com/prweb?pyActivity=pzIncludeMashupScripts"; //Load Mashup Scripts from Pega host only if third party cookies are enabled
scriptEle1.onload = scriptsLoadedFunc;
};
window.addEventListener("message",messageEventHandler,false);
</script>
</head>
<div id="nocookies" style="display:none;">
<p>This webpage/system uses cookies to enhance your experience. Please enable cookies on your browser.</p> //div to show custom error message when third party cookies are disabled
</div>
<body>
<iframe frameBorder=0 src="http://ABC.com/js/CheckCookies.html" style="display:none"/> // This iframe source must be included in the same gadget html.
</body>
<script>
var messageEventHandler = function(evnt){
var isSafari = navigator.userAgent.indexOf("AppleWebKit") != -1 && navigator.userAgent.indexOf("Chrome")==-1;
if(evnt.data == 'TPCsupported' || isSafari){
loadDesiredScripts();
}else if(evnt.data == 'TPCunsupported'){
var e = document.getElementById('PegaGadget');
e.style.display = 'none';
var e = document.getElementById('nocookies');
e.style.display = 'block';
}
};
var scriptsLoadedFunc = function(){
/*BEGIN:This code block is optional..specific to this particular implementation*/
pega.web.config.encrypt = false;
/*END:This code block is optional..specific to this particular implementation*/
var evt = document.createEvent('Event');
evt.initEvent('load', true, false);
window.dispatchEvent(evt);
}
var loadDesiredScripts = function(){
var scriptEle1 = document.createElement("script");
document.head.appendChild(scriptEle1);
scriptEle1.src="http://ABC.com/prweb?pyActivity=pzIncludeMashupScripts"; //Load Mashup Scripts from Pega host only if third party cookies are enabled
scriptEle1.onload = scriptsLoadedFunc;
};
window.addEventListener("message",messageEventHandler,false);
</script>
</head>
<div id="nocookies" style="display:none;">
<p>This webpage/system uses cookies to enhance your experience. Please enable cookies on your browser.</p> //div to show custom error message when third party cookies are disabled
</div>
<body>
<iframe frameBorder=0 src="http://ABC.com/js/CheckCookies.html" style="display:none"/> // This iframe source must be included in the same gadget html.
</body>
The above JS code, function will check if the set cookie “ThirdParty” is retrieved or not, based on that Error message div will be shown. If enabled, function will continue to load required mashup scripts.
2. CheckCookies.html will contain the below JS code to set the cookie to “ThirdParty”.
This should be included on a different host like ABC.com for the retrieval and not on the gadget hosting server XYZ.com.
<script>
document.cookie = "ThirdParty";
if(window.parent){
if(document.cookie.indexOf("ThirdParty") != -1){
window.parent.postMessage('TPCsupported','*');
} else {
window.parent.postMessage('TPCunsupported','*');
}
}
</script>
document.cookie = "ThirdParty";
if(window.parent){
if(document.cookie.indexOf("ThirdParty") != -1){
window.parent.postMessage('TPCsupported','*');
} else {
window.parent.postMessage('TPCunsupported','*');
}
}
</script>
Published May 8, 2017 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.