Merge pull request #4306 from blockscout/vb-token-instance-images-mime-types

Check token instance images MIME types

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 ### Fixes
 - [#4307](https://github.com/blockscout/blockscout/pull/4307) - Fix for composing IPFS URLs for NFTs images
+- [#4306](https://github.com/blockscout/blockscout/pull/4306) - Check token instance images MIME types
 - [#4295](https://github.com/blockscout/blockscout/pull/4295) - Mobile view fix: transaction tile tx hash overflow
 - [#4294](https://github.com/blockscout/blockscout/pull/4294) - User wont be able to open verification pages for verified smart-contract
 - [#4240](https://github.com/blockscout/blockscout/pull/4240) - `[]` is accepted in write contract page

apps/block_scout_web/.sobelow-conf

@@ -5,5 +5,8 @@
   router: "lib/block_scout_web/router.ex",
   exit: "low",
   format: "compact",
-  ignore: ["Config.Headers", "Config.CSWH", "XSS.SendResp", "XSS.Raw"]
+  ignore: ["Config.Headers", "Config.CSWH", "XSS.SendResp", "XSS.Raw"],
+  ignore_files: [
+    "apps/block_scout_web/lib/block_scout_web/views/tokens/instance/overview_view.ex"
+  ]
 ]

apps/block_scout_web/lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex

@@ -61,8 +61,8 @@
       <div class="card">
         <div class="card-body">
           <div class="erc721-media" >
-            <%= if media_type(media_src(@token_instance.instance)) == "mp4" do %>
-              <video autoplay>
+            <%= if media_type(media_src(@token_instance.instance)) == "video" do %>
+              <video autoplay style="width: 100%;">
                 <source src=<%= media_src(@token_instance.instance) %> type="video/mp4">
               </video>
             <% else %>

apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/_token.html.eex

@@ -29,7 +29,7 @@
     <div class="pl-5 col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center">
       <!-- substitute the span with <img class="tile-image" /> to token with images -->
       <div class="inventory-erc721-media" >
-        <%= if media_type(media_src(@token_transfer.instance)) == "mp4" do %>
+        <%= if media_type(media_src(@token_transfer.instance)) == "video" do %>
           <video autoplay>
             <source src=<%= media_src(@token_transfer.instance) %> type="video/mp4">
           </video>

apps/block_scout_web/lib/block_scout_web/views/tokens/instance/overview_view.ex

@@ -4,6 +4,9 @@ defmodule BlockScoutWeb.Tokens.Instance.OverviewView do
   alias BlockScoutWeb.CurrencyHelpers
   alias Explorer.Chain.{Address, SmartContract, Token}
   alias Explorer.SmartContract.Helper
+  alias FileInfo
+  alias MIME
+  alias Path
 
   import BlockScoutWeb.APIDocsView, only: [blockscout_url: 1, blockscout_url: 2]
 
@@ -40,9 +43,46 @@ defmodule BlockScoutWeb.Tokens.Instance.OverviewView do
   end
 
   def media_type(media_src) when not is_nil(media_src) do
-    media_src
-    |> String.split(".")
-    |> Enum.at(-1)
+    ext = media_src |> Path.extname() |> String.trim()
+
+    mime_type =
+      if ext == "" do
+        case HTTPoison.get(media_src) do
+          {:ok, %HTTPoison.Response{body: body, status_code: 200}} ->
+            {:ok, path} = Briefly.create()
+
+            File.write!(path, body)
+
+            case FileInfo.get_info([path]) do
+              %{^path => %FileInfo.Mime{subtype: subtype}} ->
+                subtype
+                |> MIME.type()
+
+              _ ->
+                nil
+            end
+
+          _ ->
+            nil
+        end
+      else
+        ext_with_dot =
+          media_src
+          |> Path.extname()
+
+        "." <> ext = ext_with_dot
+
+        ext
+        |> MIME.type()
+      end
+
+    if mime_type do
+      basic_mime_type = mime_type |> String.split("/") |> Enum.at(0)
+
+      basic_mime_type
+    else
+      nil
+    end
   end
 
   def media_type(nil), do: nil

apps/block_scout_web/mix.exs

@@ -79,6 +79,7 @@ defmodule BlockScoutWeb.Mixfile do
       {:ex_machina, "~> 2.1", only: [:test]},
       {:explorer, in_umbrella: true},
       {:exvcr, "~> 0.10", only: :test},
+      {:file_info, "~> 0.0.4"},
       # HTML CSS selectors for Phoenix controller tests
       {:floki, "~> 0.20.1", only: :test},
       {:flow, "~> 0.12"},

apps/block_scout_web/priv/gettext/default.pot

@@ -906,7 +906,7 @@ msgstr ""
 #: lib/block_scout_web/templates/transaction/_tabs.html.eex:4
 #: lib/block_scout_web/templates/transaction_token_transfer/index.html.eex:7
 #: lib/block_scout_web/views/address_view.ex:346
-#: lib/block_scout_web/views/tokens/instance/overview_view.ex:135
+#: lib/block_scout_web/views/tokens/instance/overview_view.ex:175
 #: lib/block_scout_web/views/tokens/overview_view.ex:41
 #: lib/block_scout_web/views/transaction_view.ex:405
 msgid "Token Transfers"
@@ -1782,7 +1782,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/tokens/instance/metadata/index.html.eex:18
 #: lib/block_scout_web/templates/tokens/instance/overview/_tabs.html.eex:10
-#: lib/block_scout_web/views/tokens/instance/overview_view.ex:136
+#: lib/block_scout_web/views/tokens/instance/overview_view.ex:176
 msgid "Metadata"
 msgstr ""
 

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -906,7 +906,7 @@ msgstr ""
 #: lib/block_scout_web/templates/transaction/_tabs.html.eex:4
 #: lib/block_scout_web/templates/transaction_token_transfer/index.html.eex:7
 #: lib/block_scout_web/views/address_view.ex:346
-#: lib/block_scout_web/views/tokens/instance/overview_view.ex:135
+#: lib/block_scout_web/views/tokens/instance/overview_view.ex:175
 #: lib/block_scout_web/views/tokens/overview_view.ex:41
 #: lib/block_scout_web/views/transaction_view.ex:405
 msgid "Token Transfers"
@@ -1782,7 +1782,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/tokens/instance/metadata/index.html.eex:18
 #: lib/block_scout_web/templates/tokens/instance/overview/_tabs.html.eex:10
-#: lib/block_scout_web/views/tokens/instance/overview_view.ex:136
+#: lib/block_scout_web/views/tokens/instance/overview_view.ex:176
 msgid "Metadata"
 msgstr ""
 

docker/Dockerfile

@@ -1,6 +1,6 @@
 FROM bitwalker/alpine-elixir-phoenix:1.11.4
 
-RUN apk --no-cache --update add alpine-sdk gmp-dev automake libtool inotify-tools autoconf python3
+RUN apk --no-cache --update add alpine-sdk gmp-dev automake libtool inotify-tools autoconf python3 file
 
 # Get Rust
 RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y

mix.lock

@@ -50,6 +50,7 @@
   "exactor": {:hex, :exactor, "2.2.4", "5efb4ddeb2c48d9a1d7c9b465a6fffdd82300eb9618ece5d34c3334d5d7245b1", [:mix], [], "hexpm", "1222419f706e01bfa1095aec9acf6421367dcfab798a6f67c54cf784733cd6b5"},
   "exjsx": {:hex, :exjsx, "4.0.0", "60548841e0212df401e38e63c0078ec57b33e7ea49b032c796ccad8cde794b5c", [:mix], [{:jsx, "~> 2.8.0", [hex: :jsx, repo: "hexpm", optional: false]}], "hexpm", "32e95820a97cffea67830e91514a2ad53b888850442d6d395f53a1ac60c82e07"},
   "exvcr": {:hex, :exvcr, "0.12.2", "e8fc0beeb62924d3b755b2718a161b13cb4ed53311378e5e587606c15190c8ed", [:mix], [{:exactor, "~> 2.2", [hex: :exactor, repo: "hexpm", optional: false]}, {:exjsx, "~> 4.0", [hex: :exjsx, repo: "hexpm", optional: false]}, {:httpoison, "~> 1.0", [hex: :httpoison, repo: "hexpm", optional: true]}, {:httpotion, "~> 3.1", [hex: :httpotion, repo: "hexpm", optional: true]}, {:ibrowse, "4.4.0", [hex: :ibrowse, repo: "hexpm", optional: true]}, {:meck, "~> 0.8", [hex: :meck, repo: "hexpm", optional: false]}], "hexpm", "63776555a1bd003ff60635aead47461ced1ff985c66427421ad344e317ba983c"},
+  "file_info": {:hex, :file_info, "0.0.4", "2e0e77f211e833f38ead22cb29ce53761d457d80b3ffe0ffe0eb93880b0963b2", [:mix], [{:mimetype_parser, "~> 0.1.2", [hex: :mimetype_parser, repo: "hexpm", optional: false]}], "hexpm", "50e7ad01c2c8b9339010675fe4dc4a113b8d6ca7eddce24d1d74fd0e762781a5"},
   "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},
   "floki": {:hex, :floki, "0.20.4", "be42ac911fece24b4c72f3b5846774b6e61b83fe685c2fc9d62093277fb3bc86", [:mix], [{:html_entities, "~> 0.4.0", [hex: :html_entities, repo: "hexpm", optional: false]}, {:mochiweb, "~> 2.15", [hex: :mochiweb, repo: "hexpm", optional: false]}], "hexpm", "2e7e21cd417c4b13523dd8b97379a33e5f432d4d1b149cf5ab496a4a29bdd7ab"},
   "flow": {:hex, :flow, "0.14.3", "0d92991fe53035894d24aa8dec10dcfccf0ae00c4ed436ace3efa9813a646902", [:mix], [{:gen_stage, "~> 0.14.0", [hex: :gen_stage, repo: "hexpm", optional: false]}], "hexpm", "da6177f8d04f663a2894e38f9b55b293c69cb230c60f81bb8c090eb713aa4a45"},
@@ -73,6 +74,7 @@
   "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"},
   "mime": {:hex, :mime, "1.6.0", "dabde576a497cef4bbdd60aceee8160e02a6c89250d6c0b29e56c0dfb00db3d2", [:mix], [], "hexpm", "31a1a8613f8321143dde1dafc36006a17d28d02bdfecb9e95a880fa7aabd19a7"},
   "mimerl": {:hex, :mimerl, "1.2.0", "67e2d3f571088d5cfd3e550c383094b47159f3eee8ffa08e64106cdf5e981be3", [:rebar3], [], "hexpm", "f278585650aa581986264638ebf698f8bb19df297f66ad91b18910dfc6e19323"},
+  "mimetype_parser": {:hex, :mimetype_parser, "0.1.3", "628ac9fe56aa7edcedb534d68397dd66674ab82493c8ebe39acb9a19b666099d", [:mix], [], "hexpm", "7d8f80c567807ce78cd93c938e7f4b0a20b1aaaaab914bf286f68457d9f7a852"},
   "mix_erlang_tasks": {:hex, :mix_erlang_tasks, "0.1.0", "36819fec60b80689eb1380938675af215565a89320a9e29c72c70d97512e4649", [:mix], [], "hexpm", "95d2839c422c482a70c08a8702da8242f86b773f8ab6e8602a4eb72da8da04ed"},
   "mochiweb": {:hex, :mochiweb, "2.18.0", "eb55f1db3e6e960fac4e6db4e2db9ec3602cc9f30b86cd1481d56545c3145d2e", [:rebar3], [], "hexpm", "b93e2b1e564bdbadfecc297277f9e6d0902da645b417d6c9210f6038ac63489a"},
   "mock": {:hex, :mock, "0.3.6", "e810a91fabc7adf63ab5fdbec5d9d3b492413b8cda5131a2a8aa34b4185eb9b4", [:mix], [{:meck, "~> 0.8.13", [hex: :meck, repo: "hexpm", optional: false]}], "hexpm", "bcf1d0a6826fb5aee01bae3d74474669a3fa8b2df274d094af54a25266a1ebd2"},