Staging to Production

assets/client/src/components/ChallengeDetails.js

@@ -121,7 +121,7 @@ export const ChallengeDetails = ({challenge, challengePhases, preview, print, ta
           <div className="follow-tooltip__section">
             <h4>Follow challenge as guest</h4>
             <p>Receive challenge updates to your email. No sign-in required</p>
-            <a href={preview ? null : challenge.gov_delivery_topic_subscribe_link}>
+            <a href={preview ? "#" : `${encodeURIComponent(challenge.gov_delivery_topic_subscribe_link)}`}>
               <button className="follow-tooltip__button">Follow challenge</button>
             </a>
           </div>
@@ -350,7 +350,7 @@ export const ChallengeDetails = ({challenge, challengePhases, preview, print, ta
                   <div className="logos">
                     <img
                       className="agency-logo"
-                      src={imageBase + challenge.agency_logo}
+                      src={`${imageBase}${encodeURIComponent(challenge.agency_logo)}`}
                       alt={`Agency logo for ${challenge.agency_name}`}                    
                     />
 
@@ -404,7 +404,7 @@ export const ChallengeDetails = ({challenge, challengePhases, preview, print, ta
                 </div>
               }
               {!print &&
-                <a className="follow__btn" href={apiUrl + `/public/previews/challenges?challenge=${challenge.uuid}&print=true`} target="_blank">
+                <a className="follow__btn" href={`${apiUrl}/public/previews/challenges?challenge=${encodeURIComponent(challenge.uuid)}&print=true`} target="_blank" rel="noopener noreferrer">
                   <span className="details__btn">
                       <svg className="usa-icon" aria-hidden="true" focusable="false" role="img"
                            style={{fill: "#FA9441", height: "21px", width: "21px", position: "relative", top: "5px", right: "5px"}}>

assets/client/src/components/ChallengeTile.js

@@ -115,7 +115,7 @@ export const ChallengeTile = ({challenge, preview}) => {
         <div className="agency_image_wrapper">
           <img
             className="agency-logo"
-            src={imageBase + challenge.agency_logo}
+            src={`${imageBase}${encodeURIComponent(challenge.agency_logo)}`}
             alt={truncateString(`Agency Logo: ${challenge.agency_name}`, 90)}
           />
         </div>
@@ -134,7 +134,7 @@ export const ChallengeTile = ({challenge, preview}) => {
       <div className="image_wrapper">
         <img
             className="agency-logo"
-            src={imageBase + challenge.agency_logo}
+            src={`${imageBase}${encodeURIComponent(challenge.agency_logo)}`}
             alt={truncateString(`Agency Logo: ${challenge.agency_name}`, 90)}
         />
       </div>
@@ -144,7 +144,7 @@ export const ChallengeTile = ({challenge, preview}) => {
   return (
     challenge ? (
       <div key={challenge.id} className="challenge-tile card">
-        <a href={challengeTileUrl(challenge, preview)} target={challenge.external_url ? "_blank" : ""} aria-label="">
+        <a href={encodeURI(challengeTileUrl(challenge, preview))} target={challenge.external_url ? "_blank" : ""} aria-label="">
           {renderTileLogo()}
           <div className="challenge-tile__text-wrapper">
             <h2 className="challenge-tile__title test" aria-label="" style={{ textAlign: 'left', paddingLeft: '20px', paddingTop: '20px', lineHeight: '30px' }}>{truncateString(challenge.title, 90)}</h2>

assets/client/src/components/PreviewBanner.js

@@ -37,9 +37,9 @@ export const PreviewBanner = ({challenge}) => {
             <div>
               <span className="me-3">Preview generated on {formatDateToLLLL()}</span>
               <a className="me-3" href={window.location.href}>Refresh page</a>
-              {!challenge.external_url &&
-                <a href={apiUrl + `/public/previews/challenges?challenge=${challenge.uuid}&print=true`} target="_blank">Print</a>
-              }
+              {!challenge.external_url && (
+                <a href={`${apiUrl}/public/previews/challenges?challenge=${encodeURIComponent(challenge.uuid)}&print=true`} target="_blank">Print</a>
+              )}
             </div> 
             <br/>
             <div>Link to share for internal agency review:</div>

assets/client/src/components/challenge_tabs/Winners.js

@@ -9,7 +9,7 @@ export const Winners = ({challenge, challengePhases, print}) => {
     if (phaseWinner.overview_image_path) {
       return (
         <img
-          src={imageBase + phaseWinner.overview_image_path}
+          src={`${imageBase}${encodeURIComponent(phaseWinner.overview_image_path)}`}
           alt="Phase Winner image"
           title="Phase Winner image"
           className="phase-winner-image mt-3"
@@ -23,7 +23,7 @@ export const Winners = ({challenge, challengePhases, print}) => {
       const {id, image_path, name, place_title} = winner
       return (
         <div key={id} className="d-flex flex-row align-items-center usa-tbm-1rem">
-          {image_path && <img src={imageBase + winner.image_path} alt="winner image" title="winner image" className="phase-winner-image me-3" />}
+          {image_path && (<img src={`${imageBase}${encodeURIComponent(winner.image_path)}`} alt="winner image" title="winner image" className="phase-winner-image me-3" />)}
           {name && <p>{name}</p>}
           {place_title && <p>{` - ${place_title}`}</p>}
         </div>

assets/client/src/index.js

@@ -60,9 +60,9 @@ const renderRouter = () => (
 )
 
 const rootElement = document.getElementById('challenge-gov-react-app')
-const apiUrl = rootElement.getAttribute('data-api-url')
+const apiUrl = encodeURI(rootElement.getAttribute('data-api-url'))
 const publicUrl = rootElement.getAttribute('data-public-url')
-const imageBase = rootElement.getAttribute('data-image-base')
+const imageBase = encodeURI(rootElement.getAttribute('data-image-base'))
 const bridgeApplyBlocked = rootElement.getAttribute('data-bridge-apply-blocked') != 'false'
 
 ReactDOM.render(renderRouter(), rootElement);

assets/client/src/preview.js

@@ -51,7 +51,7 @@ const renderPreview = () => (
 )
 
 const rootElement = document.getElementById('preview');
-const imageBase = rootElement.getAttribute('data-image-base');
+const imageBase = encodeURI(rootElement.getAttribute('data-image-base'));
 ReactDOM.render(renderPreview(), rootElement);
 
 // If you want your app to work offline and load faster, you can change

assets/js/app/_custom_url_generator.js

@@ -18,10 +18,10 @@ function set_custom_url_example() {
   if (custom_url_example_text.length > 0) {
     if (custom_url_input_value != "") {
       challenge_title_slug = title_to_url_slug(custom_url_input_value)
-      custom_url_example_text.html(challenge_title_slug)
+      custom_url_example_text.text(challenge_title_slug)
     } else {
       challenge_title_slug = title_to_url_slug(challenge_title_input_value)
-      custom_url_example_text.html(challenge_title_slug)
+      custom_url_example_text.text(challenge_title_slug)
     }
   }
 }

assets/package.json

@@ -19,7 +19,7 @@
     "create-react-app": "^5.0.1",
     "file-loader": "^6.2.0",
     "inputmask": "^5.0.5",
-    "jquery": "^3.3.1",
+    "jquery": "^3.7.1",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
     "node-quill-converter": "^0.3.3",
@@ -59,4 +59,4 @@
     "webpack": "^5.76.0",
     "webpack-cli": "^4.7.0"
   }
-}
+}