Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-66810

Allow microphone and camera to be accessed from content iframe

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Prerequisites

      1. 2 Moodle sites (A, B). Site A and B should be on different domains. They can be on subdomains of the same domain, if at the same subdomain level.
      2. Both sites have to be configured to use HTTPS.

      Setup

      Site A

      1. Login as admin.
      2. Access to "Site administration / Security / HTTP security" and enable "Allow frame embedding".
      3. Access to "Site administration / Plugins / Authentication / Manage authentication" and enable LTI authentication plugin.
      4. Access to "Site administration / Plugins / Enrolments /Manage enrol plugins" and enable "Publish as LTI tool" enrol plugin.
      5. Create a course and add a File resource with the ltipermissionstest.html uploaded (attached to this ticket).
      6. Go to the main course page and select the "Published as LTI tools" from the cog.
      7. Click the "Add" button and select in "Tool to be published" the file resource created previously.

      Site B

      1. Login as admin.
      2. Create an empty course and enrol student s1.
      3. Add a new External tool:
        • Set the "Tool URL" to the "Cartridge URL" from the Site A published tool.
        • Set the "Launch container" to "embed" (so it will display in an iframe).
        • Set the "Consumer key" to "xxx".
        • Set the "Shared secret" to the "Secret" from the Site A published tool.

      Testing instructions

      1. Login as student (s1) in site B.
      2. Go to the course and navigate to the external tool.
      3. Confirm that on you see requests for (geolocation, mic and camera) on your browser.
      4. Confirm that each feature (microphone, camera, midi, encrypted-media, geolocation) displays "Access granted" in the embedded file resource's output.

       

      ALTERNATE USING TEST LTI Provider (test page was added to it)

      Note: This test is using ZTest with a newly added tab containing Justin's dedicated test page. Here the ZTest is configured using LTI 1.3 but it could also be configured with LTI 1.1 (secret is ztest-secret). This is orthogonal to the test at hand.

      Prerequisite

      1. Site is configured with at least one course and one instructor

      Installing ZTest with Public RSA Key (existing functionality)

      We first install ZTest. If ZTest is already installed from previous testing, you can skip.
      1. ZTest tool 1.3 is installed as a site external tool:
        1. Log in as an administrator
        2. Navigate to Site Administration > Plugins > External tool > Manage tools
        3. Click on configure a tool manually
        4. Fill the form as follow:
          1. Tool name: ZTest 1.3
          2. Tool url: https://ztest.cengage.info/ztest/lti
        5. LTI Version: LTI 1.3
        6. Choose Public Key Type: RSA Key
        7. Public key: copy the value from https://ztest.cengage.info/ztest/ LTI 1.3 Connect info tab
        8. Initiate Login URI: https://ztest.cengage.info/ztest/ws/lti/startlaunch?lti13=true&client_id=CLIENT_ID_HERE&platform=moodle
        9. Redirect URI: https://ztest.cengage.info/ztest/lti13
        10. Click on ‘Show more’
        11. Check Content-Item message
        12. Change the 'Privacy' setting ‘Accept grades from the tool’ to 'Delegate to Teacher'.
        13. In Services, IMS LTI Assignment and Grade Services, choose Use this service for grade and column mgmt
        14. Save changes.
        15. Once the tool is created, click the information icon (pie icon) and copy the client id
        16. Update the initiate login URI and replace CLIENT_ID_HERE with the client id value for that tool

      Verify deep linking IFrame permissions

      • As instructor, log to a course
      • Turn editing ON
      • Click Add an activity or resource and select external tool
      • On the Add external tool page, select ZTest 13 tool for preconfigured tool
      • Click on Select Content
      • In the modal:
        • Click on pie icon and select IFrame Permission Check
        • Confirm that on you see requests for (geolocation, mic and camera) on your browser.
        • Confirm that each feature (microphone, camera, midi, encrypted-media, geolocation) displays "Access granted" assuming you granted access when prompted
        • Close the Modal but stay on the add external tool page to carry on the test below.

      Verify regular LTI launch IFrame permissions

      • Click on Select Content
      • In the modal:
        1. Click on pie icon and select content-item
        2. Click Submit button
      • Back on the external too page add, click Save and Display
      • Click on IFrame Permission Check
        • Confirm that on you see requests for (geolocation, mic and camera) on your browser.
        • Confirm that each feature (microphone, camera, midi, encrypted-media, geolocation) displays "Access granted" assuming you granted access when prompted
      Show
      Prerequisites 2 Moodle sites (A, B). Site A and B should be on different domains. They can be on subdomains of the same domain, if at the same subdomain level. Both sites have to be configured to use HTTPS. Setup Site A Login as admin. Access to "Site administration / Security / HTTP security" and enable "Allow frame embedding". Access to "Site administration / Plugins / Authentication / Manage authentication" and enable LTI authentication plugin. Access to "Site administration / Plugins / Enrolments /Manage enrol plugins" and enable "Publish as LTI tool" enrol plugin. Create a course and add a File resource with the ltipermissionstest.html uploaded (attached to this ticket). Go to the main course page and select the "Published as LTI tools" from the cog. Click the "Add" button and select in "Tool to be published" the file resource created previously. Site B Login as admin. Create an empty course and enrol student s1. Add a new External tool: Set the "Tool URL" to the "Cartridge URL" from the Site A published tool. Set the "Launch container" to "embed" (so it will display in an iframe). Set the "Consumer key" to "xxx". Set the "Shared secret" to the "Secret" from the Site A published tool. Testing instructions Login as student (s1) in site B. Go to the course and navigate to the external tool. Confirm that on you see requests for (geolocation, mic and camera) on your browser. Confirm that each feature (microphone, camera, midi, encrypted-media, geolocation) displays "Access granted" in the embedded file resource's output.   ALTERNATE USING TEST LTI Provider (test page was added to it) Note: This test is using ZTest with a newly added tab containing Justin's dedicated test page. Here the ZTest is configured using LTI 1.3 but it could also be configured with LTI 1.1 (secret is ztest-secret). This is orthogonal to the test at hand. Prerequisite Site is configured with at least one course and one instructor Installing ZTest with Public RSA Key (existing functionality) We first install ZTest. If ZTest is already installed from previous testing, you can skip. ZTest tool 1.3 is installed as a site external tool: Log in as an administrator Navigate to Site Administration > Plugins > External tool > Manage tools Click on configure a tool manually Fill the form as follow: Tool name: ZTest 1.3 Tool url: https://ztest.cengage.info/ztest/lti LTI Version: LTI 1.3 Choose Public Key Type: RSA Key Public key: copy the value from https://ztest.cengage.info/ztest/ LTI 1.3 Connect info tab Initiate Login URI: https://ztest.cengage.info/ztest/ws/lti/startlaunch?lti13=true&client_id=CLIENT_ID_HERE&platform=moodle Redirect URI: https://ztest.cengage.info/ztest/lti13 Click on ‘Show more’ Check Content-Item message Change the 'Privacy' setting ‘Accept grades from the tool’ to 'Delegate to Teacher'. In Services, IMS LTI Assignment and Grade Services, choose Use this service for grade and column mgmt Save changes. Once the tool is created, click the information icon (pie icon) and copy the client id Update the initiate login URI and replace CLIENT_ID_HERE with the client id value for that tool Verify deep linking IFrame permissions As instructor, log to a course Turn editing ON Click Add an activity or resource and select external tool On the Add external tool page, select ZTest 13 tool for preconfigured tool Click on Select Content In the modal: Click on pie icon and select IFrame Permission Check Confirm that on you see requests for (geolocation, mic and camera) on your browser. Confirm that each feature (microphone, camera, midi, encrypted-media, geolocation) displays "Access granted" assuming you granted access when prompted Close the Modal but stay on the add external tool page to carry on the test below. Verify regular LTI launch IFrame permissions Click on Select Content In the modal: Click on pie icon and select content-item Click Submit button Back on the external too page add, click Save and Display Click on IFrame Permission Check Confirm that on you see requests for (geolocation, mic and camera) on your browser. Confirm that each feature (microphone, camera, midi, encrypted-media, geolocation) displays "Access granted" assuming you granted access when prompted
    • Affected Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE
    • Pull Master Branch:
      MDL-66810-rebase
    • Story Points:
      1

      Description

      Browser restrictions on iframe content prevent the device camera and microphone from being accessed, unless explicitly allowed via the allow attribute on the iframe.

      Moodle's own RecordRTC icons on the Atto and TinyMCE toolbars will currently not work if shared within an external tool iframe. There are also 3rd party apps such as VoiceThread and Poodll recording which will not work if embedded using Moodle's external tool currently.

      This is also related to https://tracker.moodle.org/browse/MDL-65613
      which requests the addition of "autoplay" to the allow attributes.

      The chrome browser family added these restrictions last year (2018) and his document explains it a little.
      https://dev.chromium.org/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes

      It might be prudent to also add "geolocation" and possibly "midi" to the allow list since these are likely to also be required at some point.

      It should be noted that allowing these items will still not enable them. The user's explicit permission will be requested before access to camera, microphone or geolocation is granted .

      Following the item being allowed, a URL can be specified to restrict permission to that origin. If omitted the allowed origin is that of the URL in the src attribute. In the case of the mod_lti the src attribute contains a local Moodle url. Since we do not know the true origin (easily) typically a wildcard is used. So the resulting attribute looks like this:
      allow="microphone *; camera *; geolocation *"

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              jhunt Justin Hunt
              Reporter:
              jhunt Justin Hunt
              Peer reviewer:
              Mathew May
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias
              Votes:
              3 Vote for this issue
              Watchers:
              10 Start watching this issue

                Dates

                Created:
                Updated:

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 5 hours, 36 minutes
                  5h 36m