From a9aab31bfad73e434794984ea0f2d18c6cace6ec Mon Sep 17 00:00:00 2001 From: Yahya Elharony Date: Sat, 4 Nov 2023 06:41:34 +0200 Subject: [PATCH] feat: Send the origin domain to the API As Browsers do not include the originating page's domain in a standard HTTP header for cross-domain requests due to security reasons, particularly the same-origin policy. We have to send it explicitly. --- dist/stand-with-palestine-widget.js | 2 +- src/assets/js/app.js | 11 ++++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/dist/stand-with-palestine-widget.js b/dist/stand-with-palestine-widget.js index 2af5655..477e823 100644 --- a/dist/stand-with-palestine-widget.js +++ b/dist/stand-with-palestine-widget.js @@ -1 +1 @@ -(()=>{"use strict";var e={522:(e,t,n)=>{n.d(t,{Z:()=>o});var i=n(81),a=n.n(i),r=n(645),s=n.n(r)()(a());s.push([e.id,"@import url(https://fonts.googleapis.com/css2?family=Anton&display=swap);"]),s.push([e.id,'#free-palestine-widget{display:flex;justify-content:space-between;position:fixed;bottom:0;left:0;padding:8px;width:100%;height:56px;background:#fff;box-sizing:border-box;box-shadow:1px -10px 20px #f2f2f2;z-index:2147483647}#free-palestine-widget *{font-family:"Anton",sans-serif;margin:0;padding:0}#free-palestine-widget #free-palestine-banner{display:flex;align-items:center;justify-content:center;color:#000}#free-palestine-widget #free-palestine-banner .logo{position:fixed;bottom:0;left:0;height:56px}#free-palestine-widget #free-palestine-banner .hero{margin-inline-start:145px;font-size:28px;color:#009639}#free-palestine-widget #free-palestine-banner .hero .mobile{display:none}#free-palestine-widget .stats-wrapper{display:flex;margin-top:-2px;width:45%;max-width:800px;overflow:hidden;white-space:nowrap}#free-palestine-widget .stats-wrapper .stats{display:flex;align-items:center;animation:palestine-widget-scroll 15s 2s linear infinite}#free-palestine-widget .stats-wrapper .stats .item{display:flex;align-items:center;margin-inline-end:32px;color:#c13d44}#free-palestine-widget .stats-wrapper .stats .item .icon{width:auto;height:32px}#free-palestine-widget .stats-wrapper .stats .item .info{margin-inline-start:8px}#free-palestine-widget .stats-wrapper .stats .item .info .title{font-size:20px;text-transform:uppercase}#free-palestine-widget .cta{margin-top:-8px;margin-right:-8px;display:flex;align-items:center;height:56px;padding:8px 16px 8px 2px;font-size:16px;letter-spacing:.16px;text-decoration:none;color:#fff;background-color:#009639;box-sizing:border-box}#free-palestine-widget .cta .hand{margin-top:-32px}#free-palestine-widget .cta .arrow{margin-inline-start:8px}#free-palestine-widget .cta-mobile{display:none;position:absolute;margin-top:-27px;left:0;width:100%;padding:2px 42px;text-align:center;font-size:12px;font-family:sans-serif;text-decoration:none;background-color:#009639;color:#fff}#free-palestine-widget .cta-mobile svg{margin-inline-start:8px}@media(max-width: 1280px){#free-palestine-widget #free-palestine-banner .hero{font-size:18px;margin-inline-start:120px}#free-palestine-widget .stats-wrapper{display:flex;width:32%}#free-palestine-widget .stats-wrapper .stats .item{margin-inline-end:12px}#free-palestine-widget .stats-wrapper .stats .item .info .title{font-size:14px}#free-palestine-widget .cta{font-size:12px}}@media(max-width: 768px){#free-palestine-widget{height:32px}#free-palestine-widget #free-palestine-banner .logo{height:32px}#free-palestine-widget #free-palestine-banner .hero{font-size:14px;margin-inline-start:65px}#free-palestine-widget .stats-wrapper{margin-top:0}#free-palestine-widget .stats-wrapper .stats{width:750px;animation:palestine-widget-scroll-responsive 15s 2s linear infinite}#free-palestine-widget .stats-wrapper .stats .item{display:flex;margin-inline-end:12px}#free-palestine-widget .stats-wrapper .stats .item .icon{width:18px;height:18px;margin-top:2px}#free-palestine-widget .stats-wrapper .stats .item .info{display:flex;align-items:center;margin-inline-start:4px}#free-palestine-widget .stats-wrapper .stats .item .info .title{font-size:14px}#free-palestine-widget .cta{display:none}#free-palestine-widget .cta-mobile{display:block}@keyframes palestine-widget-scroll-responsive{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}}#expand-button{background-color:#000;color:#fff;border:none;padding:4px 12px;margin:10px;cursor:pointer;font-size:12px;border-radius:24px;transition:all 300ms ease-in-out}#expand-button:hover{background-color:#db0000}.expandable-element{display:none;position:fixed;width:100%;height:0;top:48px;left:0;flex-direction:column;background-color:#fff;color:#333}.expandable-element.expanded{display:flex;height:calc(100% - 48px)}.expandable-element .column{display:flex;justify-content:center;flex-wrap:wrap;padding:10px;border-bottom:1px solid #ccc}.expandable-element .column .title{text-align:center;width:100%}.expandable-element .column .list{display:flex;justify-content:center}.expandable-element .column .list .item{padding:16px;text-align:center}.expandable-element .column .list .item .icon{width:32px}.expandable-element .column .list .item .number{font-size:16px;font-weight:bold}@keyframes palestine-widget-scroll{0%{transform:translateX(0)}100%{transform:translateX(-60%)}}',""]);const o=s},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",i=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),i&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),i&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,i,a,r){"string"==typeof e&&(e=[[null,e,void 0]]);var s={};if(i)for(var o=0;o0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=r),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),a&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=a):d[4]="".concat(a)),t.push(d))}},t}},81:e=>{e.exports=function(e){return e[1]}},379:e=>{var t=[];function n(e){for(var n=-1,i=0;i{var t={};e.exports=function(e,n){var i=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(n)}},216:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var i="";n.supports&&(i+="@supports (".concat(n.supports,") {")),n.media&&(i+="@media ".concat(n.media," {"));var a=void 0!==n.layer;a&&(i+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),i+=n.css,a&&(i+="}"),n.media&&(i+="}"),n.supports&&(i+="}");var r=n.sourceMap;r&&"undefined"!=typeof btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),t.styleTagTransform(i,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function n(i){var a=t[i];if(void 0!==a)return a.exports;var r=t[i]={id:i,exports:{}};return e[i](r,r.exports,n),r.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.nc=void 0,(()=>{var e=n(379),t=n.n(e),i=n(795),a=n.n(i),r=n(569),s=n.n(r),o=n(565),l=n.n(o),p=n(216),d=n.n(p),c=n(589),C=n.n(c),f=n(522),m={};m.styleTagTransform=C(),m.setAttributes=l(),m.insert=s().bind(null,"head"),m.domAPI=a(),m.insertStyleElement=d(),t()(f.Z,m),f.Z&&f.Z.locals&&f.Z.locals;const u=[],g="https://github.com/webkeyz/stand-with-palestine",h=document.createElement("section");h.id="free-palestine-widget",document.body.insertBefore(h,document.body.firstChild);const x=document.createElement("section");x.id="free-palestine-banner",h.appendChild(x);const w=document.createElement("img");w.src="https://upload.wikimedia.org/wikipedia/commons/0/00/Flag_of_Palestine.svg",w.classList.add("logo"),x.appendChild(w);const v=document.createElement("p");v.className="hero",v.textContent="WE STAND WITH PALESTINE.",x.appendChild(v);const b=document.createElement("div");b.className="stats-wrapper",h.appendChild(b);const y=document.createElement("div");y.className="stats";const L=document.createElement("a");L.className="cta",L.innerHTML='\n\n \n \n \n \n \n \n \n \n\n\n \n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n \n\n ADD TO YOUR WEBSITE \n\n',L.href=g,L.target="blank",h.appendChild(L);const E=document.createElement("a");E.className="cta-mobile",E.innerHTML='Show your support and add this to your website \n\n\n',E.href=g,E.target="blank",h.appendChild(E),fetch("https://get-pal-stats-live-api.onrender.com/stats").then((e=>e.json())).then((e=>{u.length=0,u.push(...e),y.innerHTML="",u.forEach((e=>{const t=document.createElement("div");t.className="item";const n=document.createElement("img");n.src="https://elharony.com/public/stats-icons/"+e.icon,n.className="icon",n.alt="Stat icon";const i=document.createElement("div");i.className="info";const a=document.createElement("p");a.className="title",a.textContent=e.count+" "+e.text,i.appendChild(a),t.appendChild(n),t.appendChild(i),y.appendChild(t)})),b.appendChild(y)}))})()})(); \ No newline at end of file +(()=>{"use strict";var e={522:(e,t,n)=>{n.d(t,{Z:()=>o});var i=n(81),a=n.n(i),r=n(645),s=n.n(r)()(a());s.push([e.id,"@import url(https://fonts.googleapis.com/css2?family=Anton&display=swap);"]),s.push([e.id,'#free-palestine-widget{display:flex;justify-content:space-between;position:fixed;bottom:0;left:0;padding:8px;width:100%;height:56px;background:#fff;box-sizing:border-box;box-shadow:1px -10px 20px #f2f2f2;z-index:2147483647}#free-palestine-widget *{font-family:"Anton",sans-serif;margin:0;padding:0}#free-palestine-widget #free-palestine-banner{display:flex;align-items:center;justify-content:center;color:#000}#free-palestine-widget #free-palestine-banner .logo{position:fixed;bottom:0;left:0;height:56px}#free-palestine-widget #free-palestine-banner .hero{margin-inline-start:145px;font-size:28px;color:#009639}#free-palestine-widget #free-palestine-banner .hero .mobile{display:none}#free-palestine-widget .stats-wrapper{display:flex;margin-top:-2px;width:45%;max-width:800px;overflow:hidden;white-space:nowrap}#free-palestine-widget .stats-wrapper .stats{display:flex;align-items:center;animation:palestine-widget-scroll 15s 2s linear infinite}#free-palestine-widget .stats-wrapper .stats .item{display:flex;align-items:center;margin-inline-end:32px;color:#c13d44}#free-palestine-widget .stats-wrapper .stats .item .icon{width:auto;height:32px}#free-palestine-widget .stats-wrapper .stats .item .info{margin-inline-start:8px}#free-palestine-widget .stats-wrapper .stats .item .info .title{font-size:20px;text-transform:uppercase}#free-palestine-widget .cta{margin-top:-8px;margin-right:-8px;display:flex;align-items:center;height:56px;padding:8px 16px 8px 2px;font-size:16px;letter-spacing:.16px;text-decoration:none;color:#fff;background-color:#009639;box-sizing:border-box}#free-palestine-widget .cta .hand{margin-top:-32px}#free-palestine-widget .cta .arrow{margin-inline-start:8px}#free-palestine-widget .cta-mobile{display:none;position:absolute;margin-top:-27px;left:0;width:100%;padding:2px 42px;text-align:center;font-size:12px;font-family:sans-serif;text-decoration:none;background-color:#009639;color:#fff}#free-palestine-widget .cta-mobile svg{margin-inline-start:8px}@media(max-width: 1280px){#free-palestine-widget #free-palestine-banner .hero{font-size:18px;margin-inline-start:120px}#free-palestine-widget .stats-wrapper{display:flex;width:32%}#free-palestine-widget .stats-wrapper .stats .item{margin-inline-end:12px}#free-palestine-widget .stats-wrapper .stats .item .info .title{font-size:14px}#free-palestine-widget .cta{font-size:12px}}@media(max-width: 768px){#free-palestine-widget{height:32px}#free-palestine-widget #free-palestine-banner .logo{height:32px}#free-palestine-widget #free-palestine-banner .hero{font-size:14px;margin-inline-start:65px}#free-palestine-widget .stats-wrapper{margin-top:0}#free-palestine-widget .stats-wrapper .stats{width:750px;animation:palestine-widget-scroll-responsive 15s 2s linear infinite}#free-palestine-widget .stats-wrapper .stats .item{display:flex;margin-inline-end:12px}#free-palestine-widget .stats-wrapper .stats .item .icon{width:18px;height:18px;margin-top:2px}#free-palestine-widget .stats-wrapper .stats .item .info{display:flex;align-items:center;margin-inline-start:4px}#free-palestine-widget .stats-wrapper .stats .item .info .title{font-size:14px}#free-palestine-widget .cta{display:none}#free-palestine-widget .cta-mobile{display:block}@keyframes palestine-widget-scroll-responsive{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}}#expand-button{background-color:#000;color:#fff;border:none;padding:4px 12px;margin:10px;cursor:pointer;font-size:12px;border-radius:24px;transition:all 300ms ease-in-out}#expand-button:hover{background-color:#db0000}.expandable-element{display:none;position:fixed;width:100%;height:0;top:48px;left:0;flex-direction:column;background-color:#fff;color:#333}.expandable-element.expanded{display:flex;height:calc(100% - 48px)}.expandable-element .column{display:flex;justify-content:center;flex-wrap:wrap;padding:10px;border-bottom:1px solid #ccc}.expandable-element .column .title{text-align:center;width:100%}.expandable-element .column .list{display:flex;justify-content:center}.expandable-element .column .list .item{padding:16px;text-align:center}.expandable-element .column .list .item .icon{width:32px}.expandable-element .column .list .item .number{font-size:16px;font-weight:bold}@keyframes palestine-widget-scroll{0%{transform:translateX(0)}100%{transform:translateX(-60%)}}',""]);const o=s},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",i=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),i&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),i&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,i,a,r){"string"==typeof e&&(e=[[null,e,void 0]]);var s={};if(i)for(var o=0;o0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=r),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),a&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=a):d[4]="".concat(a)),t.push(d))}},t}},81:e=>{e.exports=function(e){return e[1]}},379:e=>{var t=[];function n(e){for(var n=-1,i=0;i{var t={};e.exports=function(e,n){var i=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(n)}},216:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var i="";n.supports&&(i+="@supports (".concat(n.supports,") {")),n.media&&(i+="@media ".concat(n.media," {"));var a=void 0!==n.layer;a&&(i+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),i+=n.css,a&&(i+="}"),n.media&&(i+="}"),n.supports&&(i+="}");var r=n.sourceMap;r&&"undefined"!=typeof btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),t.styleTagTransform(i,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function n(i){var a=t[i];if(void 0!==a)return a.exports;var r=t[i]={id:i,exports:{}};return e[i](r,r.exports,n),r.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.nc=void 0,(()=>{var e=n(379),t=n.n(e),i=n(795),a=n.n(i),r=n(569),s=n.n(r),o=n(565),l=n.n(o),p=n(216),d=n.n(p),c=n(589),C=n.n(c),f=n(522),m={};m.styleTagTransform=C(),m.setAttributes=l(),m.insert=s().bind(null,"head"),m.domAPI=a(),m.insertStyleElement=d(),t()(f.Z,m),f.Z&&f.Z.locals&&f.Z.locals;const u=[],g="https://github.com/webkeyz/stand-with-palestine",h=document.createElement("section");h.id="free-palestine-widget",document.body.insertBefore(h,document.body.firstChild);const x=document.createElement("section");x.id="free-palestine-banner",h.appendChild(x);const w=document.createElement("img");w.src="https://upload.wikimedia.org/wikipedia/commons/0/00/Flag_of_Palestine.svg",w.classList.add("logo"),x.appendChild(w);const v=document.createElement("p");v.className="hero",v.textContent="WE STAND WITH PALESTINE.",x.appendChild(v);const b=document.createElement("div");b.className="stats-wrapper",h.appendChild(b);const y=document.createElement("div");y.className="stats";const L=document.createElement("a");L.className="cta",L.innerHTML='\n\n \n \n \n \n \n \n \n \n\n\n \n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n \n\n ADD TO YOUR WEBSITE \n\n',L.href=g,L.target="blank",h.appendChild(L);const E=document.createElement("a");E.className="cta-mobile",E.innerHTML='Show your support and add this to your website \n\n\n',E.href=g,E.target="blank",h.appendChild(E),fetch("https://get-pal-stats-live-api.onrender.com/stats",{method:"GET",headers:{"X-Widget-Origin":window.location.hostname}}).then((e=>e.json())).then((e=>{u.length=0,u.push(...e),y.innerHTML="",u.forEach((e=>{const t=document.createElement("div");t.className="item";const n=document.createElement("img");n.src="https://elharony.com/public/stats-icons/"+e.icon,n.className="icon",n.alt="Stat icon";const i=document.createElement("div");i.className="info";const a=document.createElement("p");a.className="title",a.textContent=e.count+" "+e.text,i.appendChild(a),t.appendChild(n),t.appendChild(i),y.appendChild(t)})),b.appendChild(y)}))})()})(); \ No newline at end of file diff --git a/src/assets/js/app.js b/src/assets/js/app.js index b5a06b6..f5710f8 100644 --- a/src/assets/js/app.js +++ b/src/assets/js/app.js @@ -83,7 +83,7 @@ cta.className = 'cta'; cta.innerHTML = `${svgSupportHand} ADD TO YOUR WEBSITE ${svgArrow}`; cta.href = repoURL; // Open repo in a new tab; Recommended for website's traffic to not override their visit -cta.target = 'blank'; +cta.target = 'blank'; palestineBannerWrapper.appendChild(cta); const ctaMobile = document.createElement('a'); @@ -91,12 +91,17 @@ ctaMobile.className = 'cta-mobile'; ctaMobile.innerHTML = `Show your support and add this to your website ${svgLink}`; ctaMobile.href = repoURL; // Open repo in a new tab; Recommended for website's traffic to not override their visit -ctaMobile.target = 'blank'; +ctaMobile.target = 'blank'; palestineBannerWrapper.appendChild(ctaMobile); // Get updated statistics form an external API -fetch(baseAPIURL + '/stats') // Replace with your API URL +fetch(baseAPIURL + '/stats', { + method: 'GET', // or 'POST' if your endpoint requires + headers: { + 'X-Widget-Origin': window.location.hostname + } +}) .then((response) => response.json()) .then((data) => { // Update the statsData with the latest data