Экранирование объектов HTML и динамическое отображение URL

Проблему можно увидеть здесь

Я создал сайт, используя Sanity headless CMS и GatsbyJS на интерфейсе.

Я динамически запрашиваю URL-адреса, чтобы их можно было отобразить внутри атрибута src</iframe>. Проблема заключается в том, что пользователь добавляет URL-адрес, содержащий &amp, что довольно часто встречается в коде встраивания Календаря Google.

С &amp ссылка перестает работать и календарь ломается (гаснет). Если только я не запрограммирую его прямо в src, чего мы и хотим избежать.

Как я могу смягчить/устранить эту проблему и иметь ее, чтобы я мог соответствующим образом отображать URL-адрес?

Я изучил encodeURI , encodeURIComponent, даже попробовал эту пользовательскую функцию:

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

Нет игральных костей...

  • Поиск клиентского JS-решения или серверного решения, если это возможно, внутри экосистемы Sanity.

Моя текущая реализация

// sanity schema
export default {
  type: 'document',
  title: 'Google Calendar',
  name: 'calendar',
  fields: [
    {
      type: 'string',
      name: 'Title',
    },
    {
      type: 'url',
      name: 'URL',
      validation: (Rule) => Rule.required(),
    },
  ],
};

//gastby 
export default function GoogleCalendar() {
  const { calendar } = useStaticQuery(graphql`
    query {
      calendar: allSanityCalendar {
        nodes {
          URL
          Title
        }
      }
    }
  `);

  if (!calendar.nodes.length) return null;
  return (
    <>
      <div>
        {calendar.nodes.map((node) => (
          <iframe
            src = {node.URL}
            id = "test"
            title = {node.Title}
            width = "100%"
            height = "1000px"
            async
          />
        ))}
      </div>
    </>
  );
}

Вот песочница, иллюстрирующая проблему: https://stackblitz.com/edit/iframe-dynamic-src

🤔 А знаете ли вы, что...
Синтаксис JavaScript схож с синтаксисом языка программирования Java, но они не связаны.


3
256
1

Ответ:

Решено

Вот вам и рабочая песочница: https://iframe-dynamic-src-pmxqbb.stackblitz.io

Я исправил это:

  <iframe
    src = {decodeURIComponent(
      encodeURIComponent(brokeUrl.replace(/&amp;/g, "&"))
    )}
    width = "800"
    height = "600"
    frameborder = "0"
    scrolling = "no"
    content
  />

Декодирование закодированного URL-адреса, который глобально заменяет амперсанды (&amp;) на &.