Iframe не интегрируется (с полосой) через HTTPS, несмотря на то, что находится в одном домене - PullRequest
Новая
       6

Iframe не интегрируется (с полосой) через HTTPS, несмотря на то, что находится в одном домене

0 голосов
/ 17 февраля 2019

Я пытаюсь получить страницу оплаты для рендеринга со стороны сервера.Я использую React для Интернета, мой сервер размещен через HTTPS, и я пытаюсь использовать IFrame для загрузки страницы оплаты поверх приложения реагирования.Так как мне нужно сделать вызов API для сервера, и я ДОЛЖЕН использовать заголовок для аутентификации, я вызываю API и возвращаемый им HTML, который я использую для свойства srcDoc для IFrame.

// example code
// in React 
async example() {
    const htmlContent = await makeAPICall();
    // htmlContent is the html from response
    this.setState({"html": htmlContent})
}

render() {
    if (this.state.html) {
       return (
            <iframe
            srcDoc = {this.state.html}
            title, width, height
            ></iframe>
        )
    } else return null
 }

Я использую полосу для сбора платежной информации.Пока я был в разработке, это работало нормально.Я вызываю API, асинхронно загружаю HTML в iframe как srcdoc и продолжаю в Iframe.Но в тот момент, когда я развернул в производстве с использованием живых ключей, этот Iframe не может чередовать загрузку информации о платеже, отображая только загадочное сообщение «Все платежи должны быть выполнены через HTTPS».Теперь мой сервер использует HTTPS, веб-сервер размещен на самом сервере, который общается через тот же источник через HTTPS, но по какой-то причине сам Iframe не может использовать Stripe для загрузки содержимого.

Я пытался возиться со свойствами Iframe (учитывая, что я не использую свойство src ), и я пока не нашел решения.Я застрял в производстве - блокировщик страницы оплаты.Я ценю всю помощь, которую я могу получить.

Спасибо

Я попытался воспроизвести эту проблему с помощью ngrok на моем локальном хосте.С подходом, которому я следовал, я не смог загрузить его, используя свойство srcdoc .Что сработало для меня, так это когда я дал URL для Iframe в свойстве src , но это не сработало для меня, потому что мне нужно передавать заголовок при каждом запросе, который я делаю.

* 1017Ожидаемая полоса для загрузки через HTTPS из того же источника с использованием Iframe и srcDoc, но это не удается сделать.

1 Ответ

0 голосов
/ 17 февраля 2019

, учитывая, что я не использую свойство src

Когда вы сделаете это, браузер установит URL / источник документа в iframe как about:blank, или about:srcdoc в этом случае.Вы можете увидеть это продемонстрировано во фрагменте.https://html.spec.whatwg.org/multipage/iframe-embed-object.html#otherwise-steps-for-iframe-or-frame-elements

<iframe srcdoc="
<script src='https://js.stripe.com/v3/'></script>
<script type='text/javascript'>
window.onload = function(){
  var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
  document.getElementById('display').textContent = window.location.href;
}
</script>
<p id='display'></p>
"></iframe>

Проблема в том, что это означает, что JavaScript Stripe не знает, что ваша страница действительно загружается на https://example.com, так как он, вероятно, смотрит на местоположение окна, в которое загружени использует это для отображения ошибки, которую вы видите (поскольку есть очень веские причины размещать платежную форму только через https).Если вы посмотрите консоль на наличие приведенного выше фрагмента, вы увидите, что JavaScript-код Stripe выдает предупреждение, потому что считает, что он не загружается через https.Предположительно, если я начал использовать производственные ключи, предупреждение превратится в ошибку.

Похоже, кто-то столкнулся с аналогичной проблемой , и исправление заключается в использовании атрибута src и изменении вашегодизайн, чтобы соответствовать.Возможно, вы могли бы установить атрибут src для промежуточной страницы, которая динамически добавляет контент с вашего сервера в iframe (или просто сделать это прямо на родительской странице, так как вам не нужен фрейм), или изменить свой внутренний сервер для использованияболее стандартная проверка подлинности на основе файлов cookie / сеансов вместо настраиваемого заголовка.

...