canvas_lti_third_party_cookies 0.2.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 18685ffb4c05fd45f61a6e2e739fe93b4b2e9e8573e72eb07bb8d026cdb7889d
+  data.tar.gz: 1cf0160c9d86c39975abb6b64f24ca518ea052625738c904876103ad565a6e01
+SHA512:
+  metadata.gz: e770cba91ab52316550435e6f1bac4708b292b834f73ea5028da56ec92f6d86d7107f7f0f77c6c0e8da9bc8624b59cc40c837ca32cf0cc19e4215ff164dad249
+  data.tar.gz: 3a3f448a4ed8ff5e401d913c913207943576c5335c10299d29aad5c08859f581f5e58f2e42bb98cc0aa44ad080f5f41b99d58971ba0546e41c70ba0eeb8653b3

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2020 Instructure
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,52 @@
+# canvas_lti_third_party_cookies
+
+Safari blocks all 3rd-party cookies by default, which breaks LTI tools that rely on setting cookies when launched in an iframe. Instead, it exposes a new API for getting user-permitted access to set cookies from an iframe, which works though requires jumping through some fun hoops.
+See this article for a detailed explanation: https://community.canvaslms.com/t5/Developers-Group/Safari-13-1-and-LTI-Integration/ba-p/273051
+
+This gem wraps the Safari cookie dance in a Rails engine that can be easily used with one before_action callback. It is built for use with Canvas,
+which is responsible for some parts of this cookie dance, including launching the tool in a full-window 1st-party context, and providing a
+redirect url for the relaunch after the full-window launch is complete. 
+
+This gem won't work without being launched from Canvas, or a Tool Consumer that implements the same `window.postMessage` listener as Canvas
+does here: https://github.com/instructure/canvas-lms/blob/master/public/javascripts/lti/post_message/requestFullWindowLaunch.js
+
+## Usage
+
+Choose the Rails controller action that's used to launch your tool and set cookies. Set the before_action callback
+below to run on that action, and pass the data needed.
+
+* the `launch_url` parameter is required, which should be the route
+  that launches the tool.
+* the `launch_params` parameter is optional, and should contain
+  all needed query parameters that the tool requires to launch.
+* the `launch_data` parameter is optional, and should contain
+  all needed form data that the tool requires to launch.
+
+Usually, only query parameters *or* form data is needed, not both.
+
+```ruby
+include LtiThirdPartyCookies::SafariLaunch
+#...
+before_action -> { 
+  handle_safari_launch(launch_url: action_url, launch_params: { foo: bar }, launch_data: { foo: baz })
+}
+```
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+# Set 3rd party cookies in Safari
+gem 'canvas_lti_third_party_cookies', '~> 0.2.0'
+```
+
+And then execute:
+```bash
+$ bundle install
+```
+
+## Testing
+
+```bash
+$ rails test
+```

data/Rakefile

@@ -0,0 +1,32 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Lti::Third::Party::Cookies'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/controllers/concerns/lti_third_party_cookies/safari_launch.rb

@@ -0,0 +1,66 @@
+require 'browser'
+
+module LtiThirdPartyCookies::SafariLaunch
+  extend ActiveSupport::Concern
+
+  # this needs to be called as a before_action on the route that launches the tool
+  # and the tool is required to pass some parameters to this method.
+  # the `launch_url` parameter is required, which should be the route
+  #   that launches the tool.
+  # the `launch_params` parameter is optional, and should contain
+  #   all needed query parameters that the tool requires to launch.
+  # the `launch_data` parameter is optional, and should contain
+  #   all needed form data that the tool requires to launch.
+  # example:
+  # include LtiThirdPartyCookies::SafariLaunch
+  # ...
+  # before_action -> { 
+  #   handle_safari_launch(launch_url: action_url, launch_params: { foo: bar }, launch_data: { foo: baz })
+  # }
+  def handle_safari_launch(launch_url:, launch_params: {}, launch_data: {})
+    browser = Browser.new(request.headers["User-Agent"])
+    # detect both MacOS and iOS Safari
+    return unless browser.safari? || (browser.webkit? && browser.platform.ios?)
+
+    # Safari launch #4: Storage Access has been granted,
+    #   so launch the app normally.
+    if params[:storage_access_status].present?
+      # remove from request directly instead of only from `params` so that
+      # the tool *really* doesn't have to worry about this being present
+      request.request_parameters.delete(:storage_access_status)
+      return
+    end
+
+    # Safari launch #2: Full-window launch, solely for first-party user interaction.
+    #   During a full-window launch, Canvas provides a :platform_redirect_url that
+    #   will launch the tool again within an iframe in Canvas. (#3)
+    if params[:platform_redirect_url].present?
+      return render(
+        'lti_third_party_cookies/full_window_launch',
+        locals: { platform_redirect_url: params[:platform_redirect_url] }
+      )
+    end
+
+    # Safari launch #1: request Storage Access, then relaunch the tool. (#4)
+    #   If request fails, request a full window launch instead. (#2)
+    # Safari launch #3: Relaunched by Canvas after full-window launch,
+    #   request Storage Access and then relaunch the tool. (#4)
+    # Pass along any parameters provided by the tool that are needed to launch correctly,
+    # and tell the tool that it has Storage Access.
+    render(
+      'lti_third_party_cookies/request_storage_access',
+      locals: {
+        launch_url: launch_url,
+        relaunch_url: relaunch_url(launch_url, launch_params),
+        launch_data: launch_data.merge({ storage_access_status: "granted"})
+      }
+    )
+  end
+
+  private
+
+  def relaunch_url(launch_url, launch_params)
+    return launch_url if launch_params.empty?
+    "#{launch_url}?#{launch_params.to_query}"
+  end
+end

data/app/views/layouts/application.html.erb

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>LTI Tool</title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/app/views/lti_third_party_cookies/full_window_launch.erb

@@ -0,0 +1,79 @@
+<%= javascript_tag do -%>
+  document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById("redirect").addEventListener("click", () => {
+      window.location.replace("<%= platform_redirect_url %>");
+    });
+  });
+<% end %>
+<style type="text/css">
+  .flex-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+    font-size: 1.1em;
+    padding: 0 75px 0 75px;
+  }
+
+  .flex-item {
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .first {
+    margin-top: 50px;
+  }
+
+  p {
+    margin: 0 0 0.5em 0;
+  }
+
+  button {
+    background: #008EE2;
+    color: #ffffff;
+    border: 1px solid;
+    border-color: #0079C1;
+    border-radius: 3px;
+    transition: background-color 0.2s ease-in-out;
+    display: inline-block;
+    position: relative;
+    padding: 8px 14px;
+    margin-bottom: 0;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 20px;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    text-decoration: none;
+    overflow: hidden;
+    text-shadow: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+
+  #safari-logo {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div class="flex-container">
+  <div class="flex-item first">
+    <img id="safari-logo" src="https://upload.wikimedia.org/wikipedia/commons/5/52/Safari_browser_logo.svg" alt="Safari Logo" />
+  </div>
+
+  <div class="flex-item">
+    <strong>It looks like you are using Safari.</strong>
+  </div>
+
+  <div class="flex-item">
+    <p>Occasionally, Safari requires you to launch this app outside of Canvas before logging in.</p>
+    <p>This setup is now complete, and Canvas can now relaunch this app.</p>
+  </div>
+  
+  <div class="flex-item">
+     <button id="redirect">Relaunch App in Canvas</button>
+  </div>
+  <div>
+</div>

data/app/views/lti_third_party_cookies/request_storage_access.erb

@@ -0,0 +1,113 @@
+<%= javascript_tag do -%>
+  const requestStorageAccess = () => {
+    document
+      .requestStorageAccess()
+      .then(() => redirectToSetCookies())
+      .catch(() => requestFullWindowLaunch());
+  };
+
+  const requestFullWindowLaunch = () => {
+    window.parent.postMessage(
+      {
+        messageType: "requestFullWindowLaunch",
+        data: "<%= launch_url %>",
+      },
+      "*"
+    );
+  };
+
+  const redirectToSetCookies = () => {
+    const form = document.getElementById("relaunch");
+    form.submit();
+  };
+
+  document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById("request").addEventListener("click", requestStorageAccess)
+    document
+      .hasStorageAccess()
+      .then((hasStorageAccess) => {
+        if (hasStorageAccess) {
+          redirectToSetCookies();
+        }
+      })
+      .catch((err) => console.error(err));
+  });
+<% end %>
+<style type="text/css">
+  .flex-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+    font-size: 1.1em;
+    padding: 0 75px 0 75px;
+  }
+
+  .flex-item {
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .first {
+    margin-top: 50px;
+  }
+
+  p {
+    margin: 0 0 0.5em 0;
+  }
+
+  button {
+    background: #008EE2;
+    color: #ffffff;
+    border: 1px solid;
+    border-color: #0079C1;
+    border-radius: 3px;
+    transition: background-color 0.2s ease-in-out;
+    display: inline-block;
+    position: relative;
+    padding: 8px 14px;
+    margin-bottom: 0;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 20px;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    text-decoration: none;
+    overflow: hidden;
+    text-shadow: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+
+  #safari-logo {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div class="flex-container">
+  <div class="flex-item first">
+    <img id="safari-logo" src="https://upload.wikimedia.org/wikipedia/commons/5/52/Safari_browser_logo.svg" alt="Safari Logo" />
+  </div>
+
+  <div class="flex-item">
+    <strong>It looks like you are using Safari.</strong>
+  </div>
+
+  <div class="flex-item">
+    <p>Safari requires your interaction with this app before logging you in.</p>
+    <p>A dialog may appear asking you to allow this app to use cookies while browsing Canvas.</p>
+    <p>For the best experience, click Allow.</p>
+  </div>
+  
+  <div class="flex-item">
+    <button id="request">Continue to App</button>
+  </div>
+  <div>
+</div>
+<form id="relaunch" method="POST" action="<%= relaunch_url %>">
+  <% launch_data.each do |key, value| -%>
+    <%= hidden_field_tag key, value %>
+  <% end -%>
+</form>

data/config/routes.rb

@@ -0,0 +1,2 @@
+Rails.application.routes.draw do
+end

data/lib/lti_third_party_cookies.rb

@@ -0,0 +1,4 @@
+require "lti_third_party_cookies/engine"
+
+module LtiThirdPartyCookies
+end

data/lib/lti_third_party_cookies/engine.rb

@@ -0,0 +1,5 @@
+module LtiThirdPartyCookies
+  class Engine < ::Rails::Engine
+    isolate_namespace LtiThirdPartyCookies
+  end
+end

data/lib/lti_third_party_cookies/version.rb

@@ -0,0 +1,3 @@
+module LtiThirdPartyCookies
+  VERSION = '0.2.0'
+end

metadata

@@ -0,0 +1,109 @@
+--- !ruby/object:Gem::Specification
+name: canvas_lti_third_party_cookies
+version: !ruby/object:Gem::Version
+  version: 0.2.0
+platform: ruby
+authors:
+- Xander Moffatt
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2020-12-15 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.0.2
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 6.0.2.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.0.2
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 6.0.2.1
+- !ruby/object:Gem::Dependency
+  name: browser
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.6'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.6.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.6'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.6.1
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Contains the redirects and user interactions needed for an LTI tool to
+  launch from Canvas and set cookies in Safari 13.1+
+email:
+- xmoffatt@instructure.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- Rakefile
+- app/controllers/concerns/lti_third_party_cookies/safari_launch.rb
+- app/views/layouts/application.html.erb
+- app/views/lti_third_party_cookies/full_window_launch.erb
+- app/views/lti_third_party_cookies/request_storage_access.erb
+- config/routes.rb
+- lib/lti_third_party_cookies.rb
+- lib/lti_third_party_cookies/engine.rb
+- lib/lti_third_party_cookies/version.rb
+homepage: https://gerrit.instructure.com/#/admin/projects/lti_third_party_cookies
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.1
+signing_key: 
+specification_version: 4
+summary: Allow LTI tools launched by Canvas to set 3rd party cookies in Safari 13.1+
+test_files: []