Почему document.getElementByID возвращает ноль? - PullRequest
Новая
       42

Почему document.getElementByID возвращает ноль?

0 голосов
/ 13 июня 2019

Цель : отправить переменную из приложения Angular в iFrame на этой странице, но жить на другом сервере

Вопрос : Почему document.getElementById возвращает ноль? Я использую DomSanitizer неправильно или postMessage неправильно?

(что я пробовал)

  • Я поместил его внутри ngAfterViewInit, поэтому он должен быть доступен по адресу правильное время

  • DevConsole Ошибка показывает: Ошибка: небезопасное значение используется в ресурсе Контекст URL (см. http://g.co/ng/security#xss)

    • Я прочитал упомянутую статью (http://g.co/ng/security#xss) и примененный DomSanitization SafeScript возвращает значение, которое заставляет меня мне кажется, я правильно использую DomSanitizer.

  • Я тогда читаю (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Security_concerns) и проверил на event.origin

Угловая (локальный: 4200)

chat.component.html 

<div class="iframe-container"> 
    <iframe id="iframe_chatui" src="{{ chatURL }}/loading.html" class="chatiframe" allow="microphone; camera"></iframe>
</div>

chat.component.ts 

const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
    input !== null && input.tagName === 'IFRAME';

ngAfterViewInit() {        
        this.safeScript = this.domSanitizer.bypassSecurityTrustScript(this.localeId);
        let frame = document.getElementById('iframe_chatui');
        if (isIFrame(frame) && frame.contentWindow) {
                frame.contentWindow.postMessage(this.localeId, 'http://localhost:4200');
            }
    }

chatbox.aspx (локальный: 7078): 

<html>
    <body onload="onLoad()" onresize="onResize()" style="overflow-x: hidden;">   
        <div id="ChatPanel" class="patient-chat" >
            <div id="LiveChatLog" class="ChatLogBox"></div>
            <div id="UserEntryBar" class="UserEntryBar">            
                <div id="divFileUpload"> 
                    <button id="btnAddImage" onclick="ShowImageSourceDialog()" title="Add Image"><i class="icon-camera"></i></button>               
                </div>
            </div>
            <div id="divEndVisit" style="display:none;" >
                <button id="btnEndVisit" class="EndVisitButton btn" onclick="ConfirmEndVisitRequest();" >End Visit</button>
            </div>
            <div class="clearfix"></div> 
        </div>


        <script type="text/javascript">
            function receiveMessage(event) 
                    {
                        try 
                        {
                            if (event.origin === "[ROOT_SITE_URL]" ||
                                event.origin === "[ROOT_CHAT_SITE_URL]" ||
                                event.origin === "http://localhost:4200") 
                            {
                            }                       
            var receiveChatMsg = function (message) 
            {
                if(randomCondition) {}
                else if(desiredCondition) { window.addEventListener("message", receiveMessage, false); }
        </script>
    </body>
</html>
...