fix(Renderer): load script only on render

[jeremiegirault]

Type of change

• Bugfix

Description of change

I was playing with Renderer when creating a custom adapter with outstream video support. So I created a Renderer in order to display a player when retrieving some VAST response.
I noticed that the Renderer class loads the external script in it's constructor, not in the render function. Therefore external scripts are loaded, not only when the bid in won but when bid responses are received.
That can cause multiple requests during the auction and bidders that do not win can load any external scripts and access the whole page under the "outstream" module code. That can lead to strategies of sending empty bids to execute random code on the page.

note

I can't run or test anything because a transitive depenency (fiber) prevents me from installing dependencies... (outdated, not building on osx 10.14 / node 13)

initial issue

#5117

[jsnellbaker]

Hi @jeremiegirault

There is a PR open that should address the higher node related errors. In the meantime, if you lower your node version to say 10 - you should be able to install all the packages and run the gulp test command (note - the gulp test-coverage won't work).

In regards to the code, I noticed there are some params missing to handle the bid object. Without this param, the render can't play on a test page due to undefined errors. I noted some areas that I tried and seemed to work with the test page I had. Can you please update these areas?

[jsnellbaker]

In here - you need to pass the bid param.

[jsnellbaker]

In here you need to pass along the bid param again to the function call.

[jeremiegirault]

You are right

[jeremiegirault]

I used .apply to pass trough all arguments in a fix

[jeremiegirault]

We need to set a renderer, else a second warning will be displayed

[jeremiegirault]

The script is effectively not loaded called before a call to render but loading start afterwards

[jeremiegirault]

nothing happens before render

[mkendall07]

LGTM

[jeremiegirault]

Is there anything missing for a merge ? thank you

[jsnellbaker]

This looks good now - it's rendering the outstream bid successfully on my test page.

I checked as well with multiple bidders and only the winner's renderer was loaded (instead of all the bidders participating).

[ACannuniRP]

Hi @jeremiegirault ,
I executed some test to check if I could upgrade the version of Prebid.js on some website and I found that this commit breaks the renderer I use for skin. The renderer is https://github.com/AntoineJac/prebidSkin and it is hosted at this address.
In particular I see the following issue in the console:

Would you have any idea why this is happening?
Thanks

[jeremiegirault]

@ACannuniRP Hello I think that there is a trick because the actual rendering closure is bound to render context (.bind(this))
I see the error skinOverlay is not defined
I noticed that in your tests: https://github.com/AntoineJac/prebidSkin/blob/a0e21681a1a9c0a6bb45c06ecde3e49910ab7888/test/Stomp.html#L127
you use skinOverlay using implicit context which may not be window because of some arrow that is actually bound to the render context.

you can try using window.skinOverlay in your test to use the global context explicitely

[ACannuniRP]

Hi @jeremiegirault , thanks for the quick response, I changed the skinOverlay.renderAd to window.skinOverlay.renderAd and I believe that now I am step closer to the solution however I get a new error:

I checked inside the script but I was unable to find any reference to renderAd as window.renderAd but only self.renderAd which is not a method of window.
Do you have any clue?

[Nicola1976]

Hi,
we need to deliver a skin with the renderer method.

We use prebid 4.0.0 and it seems the library prebidSkin.js (https://github.com/AntoineJac/prebidSkin) doesn't work on this version.

Is there an alternative way to handle skin formats with this library with recent prebid version?

[jeremiegirault]

I managed to render skins properly with latest prebid versions.

Maybe you could setup a breakpoint on the error and see what the call stack looks like when the error is triggered ?
Look at which variable your callback performing renderAd on and in which callback is it done,
that will help you know what's your current context and where your variable are.

[ACannuniRP]

Hi @jeremiegirault ,
I am using this simple page for testing:

<html>

    <head>
        <link rel="icon" type="image/png" href="/m-symbol-purple.svg">
        <script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
        <script async src="/js/prebid3.21.0.js"></script>
        <script>
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];

            var pbjs = pbjs || {};
            pbjs.que = pbjs.que || [];
        </script>
        <script>
            var PREBID_TIMEOUT = 2500;
            var FAILSAFE_TIMEOUT = 3000;

            // Rubicon Project Ad Unit
            var adUnitCodeBanner = "/networkcod/adunitcode";

            var adSlots = [];

            var adUnits = [
                {
                    code: adUnitCodeBanner, // Ad Unit
                    mediaTypes: {
                        banner: {
                            sizes: [[1800,1000]],   // Sizes being served to that ad unit
                        }
                    },
                    renderer: {
                        url: 'https://secure-assets.rubiconproject.com/utils/prebidSkin/prebidSkin.js',
                        render: function(prebidBid) {
                            window.skinOverlay.renderAd({
                                fullBids: prebidBid,                    // required, please don't edit or change!
                                insertionMarker: "body",       // required, #div, .class or body where you want to insert skin                       
                                contentWidthMarker: "#div-1",    // required, #div, .class or body matching the size of the content
                                insertionType: "ratio",                 // required, try resize or ratio 
                                maxRatio: 0.9,                          // optional, use with insertionType ratio and define maximum ratio scale
                                header_height: "250",                   // optional
                                creativeWidth: "1800",                  // optional
                                targetScroll: true,                     // optional, scrollable or not
                                custom_style_iframe: "",                // optional if display not correct 
                                custom_style_page: "",                  // optional if display not correct
                                iframe_url: "",                         // optional
                                click_url:"https://testAntoine.fr",     // optional
                                debug: false                            // optional
                            });
                        }
                    },
                    bids: [{
                        bidder: 'rubicon',
                        params: {
                            accountId: 1001,    // Publisher's account ID in Rubicon
                            siteId: 1000,       // Site ID
                            zoneId: 21325       // Zone ID
                        }
                    }]
                }
            ];

            // ======== DO NOT EDIT BELOW THIS LINE =========== //
            googletag.cmd.push(function() {
                googletag.pubads().disableInitialLoad();
            });

            pbjs.que.push(function() {
                pbjs.setConfig({
                    debug: true
                });

                pbjs.addAdUnits(adUnits);

                pbjs.requestBids({
                    bidsBackHandler: initAdserver,
                    timeout: PREBID_TIMEOUT
                });
            });

            function initAdserver() {
                if (pbjs.initAdserverSet) return;
                pbjs.initAdserverSet = true;
                googletag.cmd.push(function() {
                    pbjs.que.push(function() {
                        pbjs.setTargetingForGPTAsync();
                        googletag.pubads().refresh();
                    });
                });
            }

            // in case PBJS doesn't load
            setTimeout(function() {
                initAdserver();
            }, FAILSAFE_TIMEOUT);

            googletag.cmd.push(function() {
                adSlots.push(googletag.defineSlot(adUnitCodeBanner, [300, 250], 'div-1').addService(googletag.pubads()));
                googletag.pubads().enableSingleRequest();
                googletag.enableServices();
            });
        </script>
    </head>
    <body>
        <h2>Basic Skin Example</h2>
        <h5>Div-1</h5>
        <div id="div-1" style="width:800px; margin-left: auto; margin-right: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar turpis a odio imperdiet faucibus. Quisque vestibulum porttitor enim ac tristique. Aliquam feugiat ipsum id justo aliquam laoreet. Quisque vulputate a purus in tincidunt. Etiam in mauris euismod, egestas nibh a, accumsan odio. Donec rhoncus porta risus ut interdum. Nulla ultricies quis sem vitae fermentum. Cras blandit est ut tincidunt porta. Suspendisse diam justo, tempus vel ultricies et, pulvinar eu ex.<br>
        <br>
        Maecenas ultricies tincidunt sollicitudin. Duis eget tristique purus. Fusce ullamcorper tristique mollis. Integer ac ligula ut libero luctus congue eu ut nulla. Fusce venenatis metus ac urna varius, ac ultricies magna venenatis. Nam at nibh eget lectus lacinia gravida. Sed vitae ipsum eget ipsum sagittis feugiat. Donec luctus ante quis enim luctus, a convallis mi laoreet. Vivamus sodales eleifend ipsum feugiat cursus. In lorem quam, molestie in purus eu, venenatis iaculis odio. Quisque augue tortor, molestie sed cursus nec, vehicula ut enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit consequat feugiat. Etiam at neque at magna convallis blandit. Aenean aliquam efficitur venenatis. Nulla cursus libero sed tincidunt consectetur.<br>
        <br>
        Maecenas id ornare ex, sed consectetur lacus. Praesent et nunc lacus. Proin sed risus quam. Suspendisse aliquet, massa sit amet rutrum consequat, tortor dui luctus risus, a aliquet ipsum ipsum sit amet tortor. Aliquam venenatis tellus ac dignissim convallis. Curabitur eleifend justo a magna iaculis facilisis. Sed non fringilla nisl. Vivamus commodo id risus non varius. Vivamus posuere ex ornare ipsum varius, sed faucibus nibh efficitur. Curabitur tempor nulla semper magna dignissim, at ultricies urna posuere. Maecenas non nisi mollis, porttitor nibh sed, porta nisi. Sed in mi at nunc dictum lacinia. Aenean a euismod dolor, faucibus tristique sem. Mauris finibus diam vitae nulla ornare, rhoncus mollis ante pharetra. Aenean vestibulum leo feugiat, convallis lacus in, pretium ipsum. Vestibulum tellus mauris, congue et libero vel, convallis rutrum mi.<br>
        <br>Suspendisse potenti. Nam nec imperdiet neque, bibendum sodales massa. Fusce blandit ante quis aliquet vulputate. Cras et turpis ipsum. Etiam in venenatis est, id egestas lectus. Aliquam lacus nulla, fringilla sed neque vitae, feugiat vestibulum tortor. Suspendisse fermentum ullamcorper egestas. Sed vitae pulvinar sem. Aliquam erat volutpat. Donec elementum erat eu vestibulum vulputate.<br>
        <br>Aliquam suscipit mollis ligula eu consectetur. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu lectus congue, mollis tortor id, accumsan magna. Mauris lacinia in magna at sagittis. Donec et sem id nibh egestas accumsan id a nisl. Nunc ac metus in mauris porta tincidunt.<br>
        <br>Nulla quis congue velit, nec elementum metus. Cras dictum nibh dolor, eu malesuada odio varius nec. Suspendisse cursus semper nisi, vel bibendum nulla sollicitudin vitae. Nunc non quam eros. Pellentesque non ligula eget velit ultrices mollis quis at felis. Donec ac tortor velit. Sed condimentum sapien porttitor nunc sollicitudin, a elementum urna pharetra.<br>
        <br>Suspendisse finibus porta tellus eu vehicula. Etiam fringilla lacus sed mattis maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis tempor augue dui, porttitor maximus velit volutpat et. Aliquam vel dolor neque. Sed porttitor vitae metus ac malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce venenatis sit amet tortor in gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec nec leo lacinia, aliquam eros sit amet, blandit felis. Fusce eu nisl id neque scelerisque ornare non et orci.<br>
        <br>Duis iaculis ornare neque a feugiat. Vivamus nec turpis sit amet justo efficitur convallis vel vehicula mauris. Aenean est tortor, ullamcorper vitae odio ut, sodales vehicula purus. Proin dignissim elit sed malesuada mollis. Morbi mollis varius dolor eu imperdiet. Aliquam euismod scelerisque felis et tempor. Nulla finibus nibh ac est malesuada aliquet. Nulla mauris ligula, mollis eu turpis sit amet, volutpat lobortis purus. Ut at risus a nisi rutrum fringilla. Ut felis neque, sodales sed elit id, rhoncus euismod turpis. Etiam nulla dolor, elementum in velit et, pulvinar pretium nisl. Sed accumsan placerat volutpat. Mauris fermentum sem sed ex euismod, ut gravida orci vehicula. Vivamus purus odio, vulputate malesuada viverra in, fringilla vel justo. Aliquam sollicitudin ut nisi vel dictum.<br>
        <br>Nam at lorem mauris. Suspendisse efficitur urna nec eros convallis fringilla. Sed risus nisl, dignissim tristique erat ac, ultrices lacinia turpis. Sed efficitur consequat magna sit amet ullamcorper. Suspendisse commodo iaculis molestie. In non dolor auctor, lobortis velit quis, vehicula lectus. Donec gravida elit a nunc molestie, eget condimentum quam laoreet. Morbi a lectus aliquet, condimentum ante quis, fringilla ligula. Maecenas sem dolor, imperdiet a diam id, elementum iaculis tellus. Phasellus pellentesque velit lorem. Sed efficitur laoreet libero nec sagittis. Aenean in pretium lectus, ut volutpat ligula. Curabitur tempor id augue in cursus. Vestibulum congue faucibus pharetra. Donec in nunc ac enim ornare mattis id sed dui. Aliquam accumsan, velit vitae convallis dapibus, turpis velit mattis massa, a gravida urna ante id justo.<br>
        <br>Mauris ac erat quis ante luctus tempor. Quisque luctus feugiat enim, in porta metus rhoncus eget. Nunc feugiat feugiat neque eu luctus. Nulla facilisi. Sed orci lacus, ullamcorper sed massa vel, sagittis vulputate ex. Nullam tristique erat non mauris molestie, sed facilisis nibh interdum. Aliquam pellentesque justo velit, sit amet faucibus ipsum ultrices laoreet. Proin ut volutpat ex, in vulputate nunc. Aliquam leo felis, sollicitudin sit amet sagittis non, malesuada et libero. Sed diam justo, porta sed maximus a, lobortis sit amet magna. Quisque convallis a libero eu consequat.</div>
    </body>
</html>

and looking at the error I can see that the error is happening in the prebid.js library itself. Does it require any change? I can open an issue for it.
Thanks!

[jeremiegirault]

Hello, I'll take a look at this setup and check how this works

[ACannuniRP]

Hi @jeremiegirault ,
I discovered that the reason why it is not working is because the render function is firing before the payload of the JS file indicated at the url property is loaded. This means that the window.skinOverlay is not yet present (undefined).
I inserted a loop that checks each second if the window.skinOverlay object is different from undefined and if it is undefined, it waits for 1 second and then retries: this is not ideal though.
Shouldn't the renderer closure be executed only when the library at the url property is fully loaded? This was the previous behaviour but something changed.

[jeremiegirault]

Hello @ACannuniRP I understand the issue I'll try to make a PR today

[jeremiegirault]

Hello @ACannuniRP actually while reviewing the code I noticed this line =>

https://github.com/prebid/Prebid.js/pull/5235/files#diff-90937887472b7d0367b505c38b518652605059f790d9eddf6fa16c9971f7718fR50

with the comment // _render is expected to use push as appropriate

You can solve your own issue using this.push inside the render function:

renderer: {
  url: 'https://secure-assets.rubiconproject.com/utils/prebidSkin/prebidSkin.js',
  render: function(prebidBid) {
    this.push(() => { // use .push to make sure that the script is loaded
      window.skinOverlay.renderAd({
        fullBids: prebidBid,                    // required, please don't edit or change!
        insertionMarker: "body",       // required, #div, .class or body where you want to insert skin                       
        contentWidthMarker: "#div-1",    // required, #div, .class or body matching the size of the content
        insertionType: "ratio",                 // required, try resize or ratio 
        maxRatio: 0.9,                          // optional, use with insertionType ratio and define maximum ratio scale
        header_height: "250",                   // optional
        creativeWidth: "1800",                  // optional
        targetScroll: true,                     // optional, scrollable or not
        custom_style_iframe: "",                // optional if display not correct 
        custom_style_page: "",                  // optional if display not correct
        iframe_url: "",                         // optional
        click_url:"https://testAntoine.fr",     // optional
        debug: false                            // optional
      });
    }
  }
},

However I can make sure that render is called after script is loaded in case a script url is provided

[jeremiegirault]

@ACannuniRP for cross referencing => #6422

[ACannuniRP]

Hi @jeremiegirault ,
I confirm that nesting the renderer closure inside this.push() solves my issue. Thanks for looking into this: it was not evident to me from the source code.