Merge pull request #446 from Giphy/bottle-data-tag-fix

execute the bottle data tag
Giphy · Oct 29, 2024 · 9ff7737 · 9ff7737
2 parents 5a73302 + 6bf5f6f
commit 9ff7737
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 8 deletions.
diff --git a/.changeset/great-peaches-agree.md b/.changeset/great-peaches-agree.md
@@ -0,0 +1,6 @@
+---
+'@giphy/react-components': minor
+'@giphy/js-util': minor
+---
+
+fix bottle data injection and replace magic tags
diff --git a/packages/react-components/src/components/bottle-data.tsx b/packages/react-components/src/components/bottle-data.tsx
@@ -0,0 +1,36 @@
+import { noUUIDRandom } from '@giphy/js-util'
+import React, { useRef, useLayoutEffect } from 'react'
+
+function processTag(tag: string) {
+    tag = tag.replace(`%%CACHEBUSTER%%`, noUUIDRandom())
+    tag = tag.replace('%%TIMESTAMP%%', `${Date.now()}`)
+    tag = tag.replace('%%APPBUNDLE%%', `web`)
+    if (typeof window !== 'undefined') {
+        tag = tag.replace('%%APP_WINDOW_SIZE%%', `${window.innerWidth},${window.innerHeight}`)
+        tag = tag.replace('%%DEVICE_LANGUAGE%%', `${navigator.language}`)
+    }
+    return tag
+}
+/**
+ * Execute a script tag in a React component.
+ * https://macarthur.me/posts/script-tags-in-react/
+ */
+function BottleData({ markup }: { markup: string }) {
+    const elRef = useRef<HTMLDivElement>(null)
+
+    useLayoutEffect(() => {
+        if (!elRef.current) return
+        const range = document.createRange()
+        range.selectNode(elRef.current)
+        const documentFragment = range.createContextualFragment(processTag(markup))
+
+        // Inject the markup, triggering a re-run!
+        elRef.current.innerHTML = ''
+        elRef.current.append(documentFragment)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    return <div ref={elRef} dangerouslySetInnerHTML={{ __html: markup }}></div>
+}
+
+export default BottleData
diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx
@@ -8,6 +8,7 @@ import styled from 'styled-components'
 import * as pingback from '../util/pingback'
 import AttributionOverlay from './attribution/overlay'
 import VerifiedBadge from './attribution/verified-badge'
+import BottleData from './bottle-data'
 import { PingbackContext } from './pingback-context-manager'
 import { GifOverlayProps } from './types'
 
@@ -201,7 +202,6 @@ const Gif = ({
         onGifVisible(gif, e) // gif is visible, perhaps just partially
         setLoadedClassName(Gif.imgLoadedClassName)
     }
-
     useEffect(() => {
         // the id has changed, maybe the image has loaded
         if (image.current?.complete) {
@@ -287,10 +287,7 @@ const Gif = ({
                     alt={getAltText(gif)}
                     onLoad={shouldShowMedia ? onImageLoad : () => {}}
                 />
-                {isAd &&
-                    bottleData?.tags?.map((tag: string, index: number) => (
-                        <div dangerouslySetInnerHTML={{ __html: tag }} key={index} />
-                    ))}
+                {isAd && bottleData?.tags?.map((tag: string, index: number) => <BottleData markup={tag} key={index} />)}
             </picture>
             {Overlay && (
                 // only render the overlay on the client since it depends on shouldShowMedia

diff --git a/packages/react-components/stories/gif.stories.tsx b/packages/react-components/stories/gif.stories.tsx
@@ -108,7 +108,13 @@ export const GifWithAd: Story = {
         bottle_data: {
             tid: '8691c382d3eed000da83ecc2ceef747b91190ab0e5bc0bc95ff5c80eeda242fa',
             tags: [
-                '<noscript class="MOAT-giphydisplay879451385633?moatClientLevel1=ff6046d1-7125-462a-809c-efa338464775&amp;moatClientLevel2=e66d47a2-1b13-4b74-a34d-23fbdc10ddb5&amp;moatClientLevel3=82&amp;moatClientLevel4=3o7WIw8TV4UJROSElW&amp;moatClientSlicer1=e26c89fe-fb01-4442-9e8f-37940600265c&amp;moatClientSlicer2=giphytrending"></noscript><script src="https://z.moatads.com/giphydisplay879451385633/moatad.js#moatClientLevel1=ff6046d1-7125-462a-809c-efa338464775&moatClientLevel2=e66d47a2-1b13-4b74-a34d-23fbdc10ddb5&moatClientLevel3=82&moatClientLevel4=3o7WIw8TV4UJROSElW&moatClientSlicer1=e26c89fe-fb01-4442-9e8f-37940600265c&moatClientSlicer2=giphytrending" type="text/javascript"></script>',
+                `<noscript class="MOAT-giphydisplay879451385633?moatClientLevel1=ff6046d1-7125-462a-809c-efa338464775&amp;moatClientLevel2=e66d47a2-1b13-4b74-a34d-23fbdc10ddb5&amp;moatClientLevel3=82&amp;moatClientLevel4=3o7WIw8TV4UJROSElW&amp;moatClientSlicer1=e26c89fe-fb01-4442-9e8f-37940600265c&amp;moatClientSlicer2=giphytrending"></noscript>
+                <script type="text/javascript">
+              console.log('cache:%%CACHEBUSTER%%')
+              console.log('timestamp:%%TIMESTAMP%%')
+              console.log('window size:%%APP_WINDOW_SIZE%%')
+              console.log('lang:%%DEVICE_LANGUAGE%%')
+            </script>`,
             ],
         },
     },

diff --git a/packages/util/src/get-pingback-id.ts b/packages/util/src/get-pingback-id.ts
@@ -4,7 +4,7 @@ let pingbackId = ''
 const idLength = 16
 
 /* istanbul ignore next */
-const noUUIDRandom = () => {
+export const noUUIDRandom = () => {
     let result = ''
     const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
     const charactersLength = characters.length

diff --git a/packages/util/src/index.ts b/packages/util/src/index.ts
@@ -1,7 +1,7 @@
 export { default as bestfit, setRenditionScaleUpMaxPixels } from './bestfit'
 export * from './collections'
 export { default as getClientRect } from './get-client-rect-from-el'
-export { default as getPingbackId } from './get-pingback-id'
+export { default as getPingbackId, noUUIDRandom } from './get-pingback-id'
 export {
     getAltText,
     getBestRendition,