pds-dev-kit-web-test 0.3.60 → 0.3.62

package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts

@@ -5,6 +5,10 @@ export declare const EMBEDED_SAMPLES: {
     DIV: string;
     DIRTY: string;
     CLEAN: string;
+    SCRIPT2: string;
+    FACEBOOK: string;
+    ALERT: string;
+    DAUM: string;
 };
 export declare const sampleCustomsection1: {
     administrativeTitle: string;

package/dist/src/sub/DynamicLayout/pagesPreviewMock.js

@@ -3,11 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.sampleCustomsection6 = exports.sampleCustomsection5 = exports.sampleCustomsection4 = exports.sampleCustomsection3 = exports.sampleCustomsection2 = exports.sampleCustomsection1 = exports.EMBEDED_SAMPLES = void 0;
 exports.EMBEDED_SAMPLES = {
     GOOGLE_MAPS: '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d508.40856699559515!2d127.04604546611074!3d37.5412884534309!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca484b232aab9%3A0x3016af9babd6093e!2z7ISc7Jq47Yq567OE7IucIOyEseuPmeq1rCDrmp3shKzroZwgMzE3!5e0!3m2!1sko!2skr!4v1690098445797!5m2!1sko!2skr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>',
-    GOOGLE_FORMS: '<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeXlFI2qpbGOGQ5Zvk3JkkJXo0qsznrpjjIutpk9nGfpPFCIA/viewform?embedded=true" width="300px" height="200px" frameborder="0" marginheight="0" marginwidth="0">로드 중…</iframe>',
+    GOOGLE_FORMS: '<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeXlFI2qpbGOGQ5Zvk3JkkJXo0qsznrpjjIutpk9nGfpPFCIA/viewform?embedded=true" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">로드 중…</iframe>',
     SCRIPT: '<div class="whattime-inline-widget" data-code="9WVUWfsUhi" style="min-width: 320px; height: 690px;"></div><link href="https://whattime.co.kr/widget/widget.css" rel="stylesheet"><script src="https://whattime.co.kr/widget/widget.js" type="text/javascript" async></script>',
     DIV: '<div style="background-color: black"><button>sample-button</button></div>',
     DIRTY: '<img src=x onerror=alert(1)//>',
-    CLEAN: '<div>CLEAN</div>'
+    CLEAN: '<div>CLEAN</div>',
+    SCRIPT2: '<script src="https:/hello.js" type="text/javascript" async></script>',
+    FACEBOOK: '<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fsminglive%2Fposts%2Fpfbid023o4i8jNwoh9B3bdQSXKcsKZiaU7rK8FuLtgGdt2crQugFWHA7aiPJZWxPpZMqTh3l&show_text=true&width=500" width="500"height="437"style="border:none;overflow:hidden"scrolling="no"frameborder="0"allowfullscreen="true"allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>',
+    ALERT: '<script>alert("this-is-no"); console.log("hi"); </script>',
+    DAUM: '<div id="daumRoughmapContainer1710850127862" class="root_daum_roughmap root_daum_roughmap_landing"></div><script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script><script charset="UTF-8">new daum.roughmap.Lander({"timestamp": "1710850127862", "key": "2ikv7", "mapWidth": "640", "mapHeight": "360"}).render(); console.log(\'what is this\')</script>'
 };
 exports.sampleCustomsection1 = {
     administrativeTitle: 'UNTITLED',
@@ -2035,7 +2039,7 @@ exports.sampleCustomsection5 = {
                         CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
                     },
                     CB_CONTENT_PROP_CODEBLOCK: {
-                        CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: exports.EMBEDED_SAMPLES.DIRTY
+                        CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: exports.EMBEDED_SAMPLES.DAUM
                     },
                     CB_CONTENT_PROP_VISIBILITY: {
                         CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
@@ -2414,9 +2418,9 @@ exports.sampleCustomsection5 = {
                         'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': null
                     },
                     CB_LAYOUT_PROP_ARRANGE: {
-                        CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL: 'CENTER',
+                        CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL: 'LEFT',
                         'CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL:MOBILE': 'MIDDLE',
-                        CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL: 'MIDDLE',
+                        CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL: 'TOP',
                         'CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL:MOBILE': null
                     },
                     CB_LAYOUT_PROP_PADDING: {
@@ -2431,11 +2435,11 @@ exports.sampleCustomsection5 = {
                         'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null
                     },
                     CB_PLACEMENT_PROP_PLACEMENT: {
-                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 10,
+                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 15,
                         'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
                         CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 20,
                         'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 20,
-                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 10,
+                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 0,
                         'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 0,
                         CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 0,
                         'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 0,

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/Embed.js

@@ -21,7 +21,7 @@ var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
-var EmbedCore_1 = __importDefault(require("./EmbedCore"));
+var EmbedIframe_1 = __importDefault(require("./EmbedIframe"));
 function Embed(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
@@ -40,6 +40,6 @@ function Embed(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(EmbedCore_1.default, { embedCode: CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE }) })) })));
+    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(EmbedIframe_1.default, { embedCode: CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE, mode: mode, style: layout }) })) })));
 }
 exports.default = Embed;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/EmbedCore.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import type { DynamicLayoutProps } from '../../../../../../../DynamicLayout/types';
 interface EmbedCoreProps {
     embedCode: string;
+    mode: DynamicLayoutProps['mode'];
 }
 declare const EmbedCore: React.FC<EmbedCoreProps>;
 export default EmbedCore;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/EmbedCore.js

@@ -42,14 +42,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var DOMPurify = __importStar(require("dompurify"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var constant_1 = require("./constant");
 var PURIFY_CONFIG = {
-    ADD_TAGS: ['iframe'],
-    ADD_ATTR: ['frameborder', 'marginheight', 'marginwidth', 'allowfullscreen', 'referrerpolicy']
+    ADD_TAGS: constant_1.PURIFY_BLOCK_TAGS,
+    ADD_ATTR: constant_1.PURIFY_BLOCK_ATTRS
 };
 var EmbedCore = function (_a) {
-    var embedCode = _a.embedCode;
+    var embedCode = _a.embedCode, mode = _a.mode;
     var sanitized = DOMPurify.sanitize(embedCode, PURIFY_CONFIG);
-    if (DOMPurify.removed.length > 0) {
+    DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+        if (node.tagName === 'IFRAME') {
+            node.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
+        }
+    });
+    if (DOMPurify.removed.length > 0 && mode === 'EDIT') {
         var message = removedMessage(DOMPurify.removed).join("\n");
         return (0, jsx_runtime_1.jsx)(S_Error, { children: message });
     }

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/EmbedIframe.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+import type { DynamicLayoutProps } from '../../../../../../../DynamicLayout/types';
+interface EmbedCoreProps {
+    embedCode: string;
+    mode: DynamicLayoutProps['mode'];
+    style: CSSProperties;
+}
+declare const EmbedIframe: React.FC<EmbedCoreProps>;
+export default EmbedIframe;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/EmbedIframe.js

@@ -0,0 +1,47 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var EmbedIframe = function (_a) {
+    // const blobUrl = useMemo(() => {
+    //   return getCodeBlobUrl(embedCode, style);
+    // }, [embedCode]);
+    var embedCode = _a.embedCode, style = _a.style;
+    var parsedCode = (0, react_1.useMemo)(function () {
+        return getHtmlCode(embedCode, style);
+    }, [embedCode, style]);
+    var iframeRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(function () {
+        if (!iframeRef.current) {
+            return;
+        }
+        var iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;
+        iframeDoc.open();
+        iframeDoc.write(parsedCode);
+        iframeDoc.close();
+    }, [parsedCode]);
+    return ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: "\uD2B9\uBCC4\uD55C\uC774\uB984", sandbox: "allow-scripts allow-same-origin allow-forms" }));
+};
+var S_Iframe = styled_components_1.default.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  height: 100%;\n  width: 100%;\n"], ["\n  border: none;\n  height: 100%;\n  width: 100%;\n"])));
+function getHtmlCode(code, style) {
+    var styleString = Object.entries(style).reduce(function (styleStr, _a) {
+        var prop = _a[0], value = _a[1];
+        var kebabProp = prop.replace(/([a-z0])([A-Z])/g, '$1-$2').toLowerCase();
+        return "".concat(styleStr).concat(kebabProp, ": ").concat(value, ";");
+    }, '');
+    var fullCode = "\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\">\n        <style>\n            html, body {\n                margin: 0;\n                padding: 0;\n                width: 100%;\n                height: 100%;\n                ".concat(styleString, "\n            }\n\n        </style>\n    </head>\n    <body>\n        ").concat(code, "\n    </body>\n    </html>\n    ");
+    // Use a blob to handle potentially complex scripts and avoid encoding issues
+    // const blob = new Blob([fullCode], { type: 'text/html' });
+    // const url = URL.createObjectURL(blob);
+    return fullCode;
+}
+exports.default = EmbedIframe;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/constant.d.ts

@@ -1,2 +1,4 @@
 export declare const tagBlacklist: string[];
 export declare const attrBlacklist: string[];
+export declare const PURIFY_BLOCK_TAGS: string[];
+export declare const PURIFY_BLOCK_ATTRS: string[];

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/constant.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.attrBlacklist = exports.tagBlacklist = void 0;
+exports.PURIFY_BLOCK_ATTRS = exports.PURIFY_BLOCK_TAGS = exports.attrBlacklist = exports.tagBlacklist = void 0;
 exports.tagBlacklist = [
     // 'script',
     //   'iframe',
@@ -24,3 +24,76 @@ exports.attrBlacklist = [
     // 'style',
     'target'
 ];
+exports.PURIFY_BLOCK_TAGS = [
+    'applet',
+    'base',
+    'basefont',
+    'command',
+    'embed',
+    'frame',
+    'frameset',
+    'iframe',
+    'keygen',
+    'link',
+    'meta',
+    'noframes',
+    'noscript',
+    'object',
+    'param',
+    'script',
+    'title'
+];
+exports.PURIFY_BLOCK_ATTRS = [
+    'accept-charset',
+    'accesskey',
+    'allow',
+    'allowfullscreen',
+    'async',
+    'autocapitalize',
+    'autofocus',
+    'autoplay',
+    'buffered',
+    'challenge',
+    'charset',
+    'code',
+    'codebase',
+    'content',
+    'contenteditable',
+    'contextmenu',
+    'controls',
+    'data',
+    'decoding',
+    'defer',
+    'dirname',
+    'draggable',
+    'dropzone',
+    'form',
+    'formaction',
+    'http-equiv',
+    'icon',
+    'importance',
+    'itemprop',
+    'keytype',
+    'kind',
+    'language',
+    'lazyload',
+    'manifest',
+    'minlength',
+    'muted',
+    'ping',
+    'sandbox',
+    'scoped',
+    'slot',
+    'spellcheck',
+    'srcdoc',
+    'srclang',
+    'start',
+    'target',
+    'translate',
+    'wrap',
+    'referrerpolicy',
+    'frameborder',
+    'scrolling',
+    'marginheight',
+    'marginwidth'
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.60",
+  "version": "0.3.62",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,6 +1,6 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.3.60]
+## [v0.3.62]
 ## 기준 pds-dev-kit-web 버전 @2.2.57
 ### sub
     * DynamicLayout
-        * embed cb - dom purify 적용
+      * blob방식에서 iframe 직접 쓰기로 변경