Uploaded image for project: 'Archive of Our Own'
  1. AO3-5192

Ensure embeds for HTTPS-enabled whitelisted sites always use HTTPS

    Details

    • Type: Improvement
    • Status: Deployed
    • Priority: Highest
    • Resolution: DeployedToBeta
    • Affects Version/s: 0.9.204
    • Fix Version/s: 0.9.206
    • Milestone:
      Internal 0.9
    • Difficulty:
      Medium
    • Roadmap:
      Work
    • Components:
      BackEnd

      Description

      Steps to reproduce

      1. Access the Archive over https
      2. Log in
      3. Make sure you're still on https
      4. Post > New Work
      5. Fill in required information
      6. For the main content, include an embed from one of our whitelisted sites, making sure the URL uses HTTP, e.g. <iframe width="640" height="360" src="http://viddertube.com/embed.php?vid=50640" frameborder="0" allowfullscreen seamless></iframe>
      7. Post Without Preview

      What happens

      The video doesn't display and your browser warns you that the page is not secure.

      What should happen instead

      If the site has HTTPS enabled, the src should be automatically converted from HTTP to HTTPS, eliminating the security warning and allowing the video to display.

      Whitelisted sites that have HTTPS

      Note: For ease of testing, I have changed the relevant parts of the embed code to HTTP, so you can just paste the code into an example work and make sure it gets changed into HTTPS.

      viddertube

      Example code: <iframe width="640" height="360" src="http://viddertube.com/embed.php?vid=50640" frameborder="0" allowfullscreen seamless></iframe><p><a href="https://viddertube.com/watch.php?vid=50640" target="_blank">TXF Scully - Clear the Area</a></p>

      youtube

      Example code: <iframe width="560" height="315" src="http://www.youtube.com/embed/Qmd6dMruwh4" frameborder="0" allowfullscreen></iframe>

      soundcloud

      Example code: <iframe width="100%" height="300" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/92870816&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>

      vimeo

      Example code: <iframe src="http://player.vimeo.com/video/97170095" width="640" height="290" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/97170095">How Far We've Come (MCU fanvid)</a> from <a href="https://vimeo.com/user1936478">kaydee falls</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

      archiveofourown

      Refer to the embed FAQ for examples

      spotify

      Example code: <iframe src="http://open.spotify.com/embed/user/womanaction/playlist/6TLS74Np2sfi3zZ3SqSwGB" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>

      Note: The above example is for the updated Spotify embed code, which won't work until AO3-5086 Deployed is merged. Existing Spotify embeds use embed.spotify.com, according to the issue.

      dailymotion

      Example code: <iframe frameborder="0" width="480" height="270" src="http://www.dailymotion.com/embed/video/x1m3of" allowfullscreen></iframe><br /><a href="http://www.dailymotion.com/video/x1m3of" target="_blank">The Jon All The Bad Guys Want</a> <i>by <a href="http://www.dailymotion.com/sailorptah" target="_blank">sailorptah</a></i>

      Note: This uses a relative protocol by default – src="//www.dailymotion.com/embed/video/x1m3of"

      archive.org

      Example code: <iframe src="http://archive.org/embed/gov.archives.arc.1257628" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>

      8tracks

      HTML5 example code: <iframe src="http://8tracks.com/mixes/8658932/player_v3_universal" width="300" height="250" style="border: 0px none;"></iframe><p class="_8t_embed_p" style="font-size: 11px; line-height: 12px;"><a href="http://8tracks.com/intertwiningsouls/drown-the-noise?utm_medium=referral&utm_content=mix-page&utm_campaign=embed_button">drown the noise</a> from <a href="http://8tracks.com/intertwiningsouls?utm_medium=referral&utm_content=mix-page&utm_campaign=embed_button">intertwiningsouls</a> on <a href="http://8tracks.com?utm_medium=referral&utm_content=mix-page&utm_campaign=embed_button">8tracks Radio</a>.</p>

      Flash example code: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="300" height="250"><param name="movie" value="/player_v3"><param name="allowscriptaccess" value="always"><embed src="/player_v3" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="250" allowscriptaccess="always" ></embed></object><p class="_8t_embed_p" style="font-size: 11px; line-height: 12px;"><a href="?utm_medium=referral&utm_content=mix-page&utm_campaign=embed_button">drown the noise</a> from <a href="?utm_medium=referral&utm_content=mix-page&utm_campaign=embed_button">intertwiningsouls</a> on <a href="http://8tracks.com?utm_medium=referral&utm_content=mix-page&utm_campaign=embed_button">8tracks Radio</a>.</p>

      podfic.com

      Example code: <embed type="application/x-shockwave-flash" flashvars="audioUrl=LINKTOMP3HERE" src="http://podfic.com/player/audio-player.swf" width="400" height="27" allowscriptaccess="never" allownetworking="internal"></embed>

      Whitelisted sites that do not have HTTPS

      Note: To test, make sure these don't get converted to https.

      metacafe

      Example code: <iframe width="560" height="315" src="http://www.metacafe.com/embed/11559713/the-incredibly-active-and-busy-lifestyle-of-an-otter/" frameborder="0" allowfullscreen></iframe>

      criticalcommons

      Example code: <iframe src='http://www.criticalcommons.org/Members/ccManager/clips/kenBurnsColbert.mp4/embed_view' frameborder='0' width='630' height='460' allowfullscreen></iframe>

      ning.com and vidders.net

      Example code: <embed wmode="opaque" src="http://static.ning.com/socialnetworkmain/widgets/video/flvplayer/flvplayer.swf?xn_version=3704000907" flashvars="config=http%3A%2F%2Fvidders.net%2Fvideo%2Fvideo%2FshowPlayerConfig%3Fid%3D2820784%253AVideo%253A311391%26ck%3D-%26theme982Version%3D6&video_smoothing=on&autoplay=off&hideShareLink=1&isEmbedCode=1" width="456" height="344" allowfullscreen="true" type="application/x-shockwave-flash" allowscriptaccess="never" allownetworking="internal">

      Note: While you can change the http for the src into https, that doesn't make the page secure – it's the flashvars that matters, and that doesn't work with https.

      Whitelisted sites with unknown HTTPS support

      Note: A database admin needs to find works with embeds from the following sites so we can test whether they have HTTPS support. Once we know, we can sort these into the proper sections above.

      google

      Example code:

      Note: I'm sure Google works with HTTPs, but I'm not sure what the code looks like. Is this just the old Google audio player that no longer works?

      Additional information

      • Must be completed and ready to deploy before we convert existing embeds to HTTPS on October 4
      • Make sure to delete the test work you post!

        Attachments

          Activity

            People

            • Assignee:
              elzj78 elzj78 (Elz)
              Reporter:
              sarken sarken
            • Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: